ECMAScript and Simple SVG path Animation | Fundamentals of SVG Programming: Concepts to Source Code (Graphics Series)

Animation and Dynamic Creation of SVG Elements

Consider the set of circles rendered in Figure 13.2.

click to expand
Figure 13.2: Dynamically adding a grid of circles.

The SVG document in Listing 13.2 demonstrates how to define an ECMAScript function in order to use mouse clicks to control the populating of a grid of circles.

Listing 13.2 populateCircles2.svg

<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"   "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">   <script type="text/ecmascript">     <![CDATA[     var startX       = 100.;     var startY       = 250.;     var xPosition    = 0.;     var yPosition    = 0.;     var rowCount     = 4.;     var columnCount  = 8.;     var theRow       = 0.;     var theColumn    = 0.;     var fillColor    = "";     var shortPause   = 100.;     var circleRadius = 20.;     var circleColors = ['red','green',                         'blue','yellow'];     var circleNode   = null;     var theTimeout   = null;     var svgDocument  = null;     var target       = null;     var gcNode       = null;     function init(event)     {        target   = event.getTarget();        svgDocument = target.getOwnerDocument();        gcNode   = svgDocument.getElementById("gc");        theTimeout = setTimeout(                          "window.populateCircles()",                          shortPause);     }     function populateCircles(event)     {        circleNode = svgDocument.createElement("circle");        xPosition  = startX+2*circleRadius*theColumn;        yPosition  = startY+2*circleRadius*theRow;        circleNode.setAttribute("cx", xPosition);        circleNode.setAttribute("cy", yPosition);        fillColor  = "fill:";        fillColor += circleColors[(theRow+theColumn)%4];        circleNode.setAttribute("style", fillColor);        circleNode.setAttribute("r",     circleRadius);        gcNode.appendChild(circleNode);        theTimeout = setTimeout(                       "window.populateCircles()",                        shortPause);        if( ++theColumn >= columnCount )        {           theColumn = 0;           ++theRow;        }        if( theRow >= rowCount )        {           stopAnimation(event);        }     } // populateCircles     function stopAnimation(event)     {        window.clearTimeout(theTimeout);     }   ]]> </script>   <!-- ============================ -->   <g  transform="translate(10,10)">     <rect x="0" y="0"           width="800" height="500"           fill="none" stroke="none"/>     <!-- render blue quadrilateral -->     <polygon               onclick="stopAnimation(evt)"              points="200,100 300,100 300,200 200,200"              fill="blue"/>     <!-- Display text message -->     <text x="300" y="50"           font-family="Verdana"           font-size="25" text-anchor="middle">       Click inside the rectangle to stop animation     </text>   </g>   </svg>

Remarks

The SVG code in Listing 13.2 combines mouse events with an animation effect by adding a set of circles, one row at a time, until a 4x8 grid of circles is rendered. While these circles are being rendered, you can stop the animation simply by clicking on the blue rectangle above the rendered set of circles. The code in this example starts with the definition of a number of ECMAScript global variables. The first set of global variables is given below:

var startX       = 100.; var startY       = 250.; var xPosition    = 0.; var yPosition    = 0.; var rowCount     = 4.; var columnCount  = 8.; var theRow       = 0.; var theColumn    = 0.; var fillColor    = "";

The variables startX and startY specify the x-coordinate and the y-coordinate of the upper-left vertex that contains the rectangular grid of circles.

The variables xPosition and yPosition specify the x-coordinate and the y- coordinate of the center of each new circle that is added to the rectangular grid of circles.

The variables rowCount and columnCount specify the number of rows and the number of columns for the rectangular grid of circles.

The variables theRow and theColumn specify the current row and the current column of the current circle.

The variable fillColor is a dynamically constructed string that specifies the 'style' of the current circle.

The second set of global variables is given below:

var shortPause   = 100.; var circleRadius = 20.; var circleColors = ['red','green',                     'blue','yellow'];

The variable shortPause has a value of 100, which represents the number of milliseconds between the rendering of successive circles in the rectangular grid of circles.

The variable circleRadius has a value of 20, which is the radius of all the circles in the rectangular grid of circles.

The variable circleColors is an array of strings representing the colors red, green, blue, and yellow. These colors are used for coloring all the circles in the rectangular grid of circles.

The third set of global variables is:

var circleNode   = null; var theTimeout   = null; var svgDocument  = null; var target       = null; var gcNode       = null;

The variable circleNode is used for creating each circle that is added to the rectangular grid of circles.

The variables theTimeout, svgDocument, target, and gcNode are assigned their usual values in the ECMAScript function init().

The ECMAScript function populateCircles() performs the actual work of adding the circles to the rectangular grid of circles. The first part of this function creates a new SVG circle element, populates the cx, cy, style, and r attributes, and then adds this element to the DOM:

circleNode = svgDocument.createElement("circle"); circleID   = "circle"+theRow+"_"+theColumn; xPosition  = startX+2*circleRadius*theColumn; yPosition  = startY+2*circleRadius*theRow; circleNode.setAttribute("cx", xPosition); circleNode.setAttribute("cy", yPosition); fillColor  = "fill:"; fillColor += circleColors[(theRow+theColumn)%4]; circleNode.setAttribute("style", fillColor); circleNode.setAttribute("r",     circleRadius); gcNode.appendChild(circleNode);

Next, the variable theTimeout is assigned a value, followed by the end-of-row logic:

theTimeout = setTimeout("window.populateCircles()",                         shortPause); if( ++theColumn >= columnCount ) {    theColumn = 0;    ++theRow; }

The last block of code checks if the value of theRow exceeds the value of rowCount, which represents a fully populated rectangular array of circles; if so, the
ECMAScript function stopAnimation() is invoked:

if( theRow >= rowCount ) {    stopAnimation(event); }

The ECMAScript function stopAnimation() contains one line of code in order to stop the animation:

function stopAnimation(event) {    window.clearTimeout(theTimeout); }

There are two cases in which the animation will stop: the first case is when the rectangular grid of circles is filled with circles, and the second case is when you click on the 'mouse aware' blue rectangle at the top of the screen, which is defined as follows:

<polygon           onclick="stopAnimation(evt)"          points="200,100 300,100 300,200 200,200"          fill="blue"/>

When you click on the blue rectangle, the ECMAScript function stopAnimation() is invoked, which stops the animation. If you click on the blue rectangle after the rectangular grid of circles has been completely filled, you obviously won't see any difference.

The last section of the SVG document displays a text message that explains how to stop the animation, as listed below:

<text x="300" y="50"       font-family="Verdana"       font-size="25" text-anchor="middle">    Click inside the rectangle to stop animation </text>