1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677 |
- <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 id="targetGroup" fill="yellow" stroke="#000000" stroke-width="2" x="60" y="60" width="170" height="170" />
- <image x="60" y="60" width="170" height="170" xlink:href="resources/3dolph.gif" />
- </g>
- </svg>
|