blob: 7f0972e2343a7ef737e0348c3d176928063c65ae (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
|
<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 id="targetGroup">
<rect fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
<foreignObject 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>
|
