Perl Graphics Programming

SVG Animation

Up until now, we have seen only static, single-frame SVG documents. However, SVG can also be used for animation, just like Flash. Rather than describing the specific state of each element in each frame of the animation, SVG wraps up a sequence of high-level animation transformations in one of four animation tags. An animation tag tells how an object should be moved between two points and the time it should take to get there, or it describes a color transformation that should be applied at a particular moment in time.

SVG animation is an evolution of the World Wide Web Consortium’s convoluted SMIL (Synchronized Multimedia Interchange Language) standard. Luckily, the four animation tags provided are relatively easy to understand:

<animate>

This tag is used to modify a particular attribute of an element over a period of time.

<animateMotion>

This tag is used to move an element along a predefined path over a period of time.

<animateColor>

This tag is used to apply a color transform to the specified element.

<animateTransform>

This tag can be used to perform a number of transformations on an element.

The following <animate> element, for example, causes the circle to expand to 5 times its original size over the course of 10 seconds, after which it stops.

<circle id="ball" r="10" fill="#FF0000">
  <animate attributeName="r" from="10" to="50" dur="10s"/>
</circle>

The remainder of this section details the use of the <animateMotion> tag to create the effect of a bouncing ball. An <animateMotion> ...