SVG Animation and JavaScript - Part 2 of Chapter 7 from Perl Graphics Programming (1/4) | WebReference

SVG Animation and JavaScript - Part 2 of Chapter 7 from Perl Graphics Programming (1/4)

current pageTo page 2To page 3To page 4

Perl Graphics Programming, Chapter 7: Creating SVG with Perl

SVG Animation

[The following is a continuation of our series of excerpts from chapter 7 of the O'Reilly title, Perl Graphics Programming.]

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:

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

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

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

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"/>

The remainder of this section details the use of the <animateMotion> tag to create the effect of a bouncing ball. An <animateMotion> tag can be associated with most elements, including: <g>, <text>, <image>, <line>, <path>, <rect>, <circle>, <ellipse>, <polyline>, and <polygon>.

The <animateMotion> element takes several attributes:

The duration of the animation. This can be expressed in time units ranging from a millisecond to an hour (ms, s, min, and h).

A list of path data describing the path to be followed.

This attribute defines how the object should be moved from point to point on the path. If discrete, the object is moved from one point to another with no interpolation. If linear, intermediate frames are added where the object moves at an even pace between each pair of points. In our bouncing ball example, we need to use spline interpolation so that the ball moves faster on the longer segments of the curved path and slower on the shorter segments.

This attribute indicates the number of times (if any) the animation should repeat. A value of indeterminate means that the animation loops indefinitely.

An alternative to the path attribute, values allows you to specify a list of key frames that corresponds to the keytimes attribute list. The object is moved to each point in this list when the associated keytime is reached.

A list of moments in time that corresponds to the values keyframe entries.

Other attributes are available for different applications; see the SVG specification for more details.

current pageTo page 2To page 3To page 4

Created: February 19, 2003
Revised: February 19, 2003