Animation (via script)

Source of animation.svg:Hide line numbers

01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      width="430px" height="430px" viewBox="-15 -15 430 430"
04:      onload="setup(evt)">   
05: 
06: <script type="text/ecmascript">
07: // <![CDATA[
08: 
09: var x=200, y=200;
10: var dx=2.53245, dy=3.3123512;
11: var ball;
12: var timeout;
13: 
14: function setup(evt){
15:    ball = document.getElementById("Ball");
16:    timeout=setTimeout(update,20);
17: }
18: 
19: function update(){
20:    x=x+dx;
21:    y=y+dy;
22:    if (x<0) {
23:       x=-x;
24:       dx=-dx;   
25:    }    
26:    if (x>400) {
27:       x=800-x;
28:       dx=-dx;   
29:    }   
30:    if (y<0) {
31:       y=-y;
32:       dy=-dy;   
33:    }    
34:    if (y>400) {
35:       y=800-y;
36:       dy=-dy;   
37:    }
38:    ball.setAttributeNS(null, "cx", x);
39:    ball.setAttributeNS(null, "cy", y);  
40:    timeout=setTimeout(update,20);
41: }
42: 
43: // ]]>
44: </script>
45: 
46:    <rect x="-10" y="-10" width="420" height="420" 
47:          stroke="green" fill="darkgreen" stroke-width="2px"/>
48:    <circle id="Ball" cx="200" cy="200" r="10" stroke-width="0px" fill="white"/> 
49:    
50: </svg>

Source of animation.svg:Show line numbers

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" 
     width="430px" height="430px" viewBox="-15 -15 430 430"
     onload="setup(evt)">   

<script type="text/ecmascript">
// <![CDATA[

var x=200, y=200;
var dx=2.53245, dy=3.3123512;
var ball;
var timeout;

function setup(evt){
   ball = document.getElementById("Ball");
   timeout=setTimeout(update,20);
}

function update(){
   x=x+dx;
   y=y+dy;
   if (x<0) {
      x=-x;
      dx=-dx;	
   } 	
   if (x>400) {
      x=800-x;
      dx=-dx;	
   }   
   if (y<0) {
      y=-y;
      dy=-dy;	
   } 	
   if (y>400) {
      y=800-y;
      dy=-dy;	
   }
   ball.setAttributeNS(null, "cx", x);
   ball.setAttributeNS(null, "cy", y);	
   timeout=setTimeout(update,20);
}

// ]]>
</script>

   <rect x="-10" y="-10" width="420" height="420" 
         stroke="green" fill="darkgreen" stroke-width="2px"/>
   <circle id="Ball" cx="200" cy="200" r="10" stroke-width="0px" fill="white"/> 
   
</svg>

In the above, the main new thing is the command timeout=setTimeout(update,20). This code causes the function update() to be called after 20 milliseconds have passed. The setTimeout command is called in the setup() function, which begins the animation. It is also called at the end of the update() function to continue it.

Stopping the animation:

The setTimeout(update,20) returns a token, which we store in the variable timeout. This is needed for canceling the timeout, which we do with the command clearTimeout(timeout). See the example below:

Source of animation2.svg:Hide line numbers

01: <svg version="1.1" baseProfile="full"
02:      xmlns="http://www.w3.org/2000/svg" 
03:      width="430px" height="450px" viewBox="-15 -15 430 450"
04:      onload="setup(evt)"
05:      font-family="Times, serif" font-size="20px">   
06: 
07: <script type="text/ecmascript">
08: // <![CDATA[
09: 
10: var x=200, y=200;
11: var dx=2.53245, dy=3.3123512;
12: var ball;
13: var timeout;
14: 
15: function setup(evt){
16:    ball = document.getElementById("Ball");
17:    timeout=setTimeout(update,20);
18: }
19: 
20: function update(){
21:    x=x+dx;
22:    y=y+dy;
23:    if (x<0) {
24:       x=-x;
25:       dx=-dx;   
26:    }    
27:    if (x>400) {
28:       x=800-x;
29:       dx=-dx;   
30:    }   
31:    if (y<0) {
32:       y=-y;
33:       dy=-dy;   
34:    }    
35:    if (y>400) {
36:       y=800-y;
37:       dy=-dy;   
38:    }
39:    ball.setAttributeNS(null, "cx", x);
40:    ball.setAttributeNS(null, "cy", y);  
41:    timeout=setTimeout(update,20);
42: }
43: 
44: function pause(evt){
45:    if (timeout!=null) {
46:       // This stops the animation:
47:       clearTimeout(timeout);
48:       timeout=null;
49:    }
50:    var msg=document.getElementById("Message");
51:    msg.firstChild.nodeValue = "Restart";
52:    msg.setAttributeNS(null, "onclick", "restart(evt)"); 
53: }
54: 
55: function restart(evt){
56:    var msg=document.getElementById("Message");
57:    msg.firstChild.nodeValue = "Pause";
58:    msg.setAttributeNS(null, "onclick", "pause(evt)");   
59:    timeout=setTimeout(update,20);
60: }
61: 
62: // ]]>
63: </script>
64: 
65:    <rect x="-10" y="-10" width="420" height="420" 
66:          stroke="green" fill="darkgreen" stroke-width="2px"/>
67:    <circle id="Ball" cx="200" cy="200" r="10" stroke-width="0px" fill="white"/> 
68:    <text id="Message" x="200" y="430" fill="blue" 
69:          text-decoration="underline" cursor="pointer" text-anchor="middle" 
70:          onclick="pause(evt)">Pause</text>
71:    
72: </svg>

Source of animation2.svg:Show line numbers

<svg version="1.1" baseProfile="full"
     xmlns="http://www.w3.org/2000/svg" 
     width="430px" height="450px" viewBox="-15 -15 430 450"
     onload="setup(evt)"
     font-family="Times, serif" font-size="20px">   

<script type="text/ecmascript">
// <![CDATA[

var x=200, y=200;
var dx=2.53245, dy=3.3123512;
var ball;
var timeout;

function setup(evt){
   ball = document.getElementById("Ball");
   timeout=setTimeout(update,20);
}

function update(){
   x=x+dx;
   y=y+dy;
   if (x<0) {
      x=-x;
      dx=-dx;	
   } 	
   if (x>400) {
      x=800-x;
      dx=-dx;	
   }   
   if (y<0) {
      y=-y;
      dy=-dy;	
   } 	
   if (y>400) {
      y=800-y;
      dy=-dy;	
   }
   ball.setAttributeNS(null, "cx", x);
   ball.setAttributeNS(null, "cy", y);	
   timeout=setTimeout(update,20);
}

function pause(evt){
   if (timeout!=null) {
      // This stops the animation:
      clearTimeout(timeout);
      timeout=null;
   }
   var msg=document.getElementById("Message");
   msg.firstChild.nodeValue = "Restart";
   msg.setAttributeNS(null, "onclick", "restart(evt)");	
}

function restart(evt){
   var msg=document.getElementById("Message");
   msg.firstChild.nodeValue = "Pause";
   msg.setAttributeNS(null, "onclick", "pause(evt)");	
   timeout=setTimeout(update,20);
}

// ]]>
</script>

   <rect x="-10" y="-10" width="420" height="420" 
         stroke="green" fill="darkgreen" stroke-width="2px"/>
   <circle id="Ball" cx="200" cy="200" r="10" stroke-width="0px" fill="white"/> 
   <text id="Message" x="200" y="430" fill="blue" 
         text-decoration="underline" cursor="pointer" text-anchor="middle" 
         onclick="pause(evt)">Pause</text>
   
</svg>

Note that we set the timeout variable to null when it is not in use to prevent canceling the same timeout twice.

Animation (via script)

A billiard ball bouncing around a square:

Stopping the animation: