82 lines
2.2 KiB
XML
82 lines
2.2 KiB
XML
<svg xmlns="http://www.w3.org/2000/svg"
|
|
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
xmlns:xhtml="http://www.w3.org/1999/xhtml">
|
|
|
|
<script>
|
|
<![CDATA[
|
|
var stateIndex = 0;
|
|
var currentTarget = 0;
|
|
|
|
function stateA()
|
|
{
|
|
document.getElementById("A").textContent = '|A|';
|
|
document.getElementById("B").textContent = 'B';
|
|
|
|
currentTarget = 0;
|
|
startAnimation();
|
|
}
|
|
|
|
function stateB()
|
|
{
|
|
document.getElementById("A").textContent = 'A';
|
|
document.getElementById("B").textContent = '|B|';
|
|
currentTarget = 1;
|
|
startAnimation();
|
|
}
|
|
|
|
var intervalId = null;
|
|
|
|
function startAnimation() {
|
|
if (intervalId == null) {
|
|
intervalId = setInterval(animationStep, 20);
|
|
}
|
|
}
|
|
|
|
function animationStep() {
|
|
if (Math.abs(stateIndex - currentTarget) < .001) {
|
|
clearInterval(intervalId);
|
|
intervalId = null;
|
|
return;
|
|
}
|
|
|
|
if (stateIndex < currentTarget) {
|
|
stateIndex += 1 / 128;
|
|
} else {
|
|
stateIndex -= 1 / 128;
|
|
}
|
|
|
|
var elt = document.getElementById("targetGroup");
|
|
|
|
var transform = "translate(" + (100 * stateIndex) + "," + (100 * stateIndex) + ") rotate(" + (405 * stateIndex) + ",100,250) scale(" + (1 + stateIndex) + ")" ;
|
|
var opacity = 1 - .75 * stateIndex;
|
|
|
|
elt.setAttribute("opacity", opacity);
|
|
elt.setAttribute("transform", transform);
|
|
}
|
|
|
|
|
|
]]>
|
|
</script>
|
|
|
|
<text id="A" x="0" y="32" fill="red" font-size="32" onclick="stateA()">|A|</text>
|
|
<text id="B" x="60" y="32" fill="blue" font-size="32" onclick="stateB()">B</text>
|
|
<text x="0" y="642" fill="black" font-size="32">Click B and then A above.</text>
|
|
<text x="0" y="674" fill="black" font-size="32">The animation should have no trails or clipping.</text>
|
|
|
|
<circle fill="pink" cx="300" cy="300" stroke="lightblue" stroke-width="40" r="300" />
|
|
|
|
<g>
|
|
<rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
|
|
|
|
<foreignObject id="targetGroup" x="60" y="60" width="170" height="170" >
|
|
<xhtml:xhtml>
|
|
<xhtml:img src="http://www.citilink.com/~grizzly/anigifs/3dolph.gif" width="170" height="170" /><br />
|
|
</xhtml:xhtml>
|
|
</foreignObject>
|
|
</g>
|
|
|
|
|
|
</svg>
|
|
|
|
|