8. Animation
8.1 Simple Animation
SVG provides some quite exciting animation facilities that can brighten up your web pages and are useful in a variety of training and teaching applications. Four elements are provided that declaratively define animations over attributes and properties:
- animate
- set
- animateTransform
- animateColor
Here is a very simple example to get started with:
<rect x="200" y="100" width="240" height="80" style="fill:red"> <animate attributeName="width" from="240" to="80" begin="0s" dur="8s" fill="freeze" /> <animate attributeName="height" from="80" to="160" begin="6s" dur="7s" fill="freeze" /> <animate attributeName="width" from="80" to="240" begin="16s" dur="8s" fill="freeze" /> <animate attributeName="height" from="80" to="160" begin="18s" dur="6s" fill="freeze" /> </rect>
To start the animation, click on the cyan circle.
Figure 8.1: Simple Animation
The animate element defines animation to be applied to any of the attributes of the rect element. In this example, four animations are performed on the element. The first starts the animation at the time the SVG is drawn (0s) and the width of the rectangle is changed from 240 to 80 over the next 8 seconds. Independently, the second animation waits until 6 seconds have elapsed and then increases the height of the rectangle from 80 to 160 over the next 7 seconds. At 8 seconds into the animation, the width stops increasing and stays at the final value (that is what the freeze value indicates). After 13 seconds the height stops increasing, and from then on there is a static rectangle until the time reaches 16 seconds whereupon the width and height animate bac to their original values.
The animate element has a slightly different format when the aim is to animate a property defined as part of the style attribute. The element then has the form:
<circle cx="50" cy="50" r="20" style="fill:red;opacity:1">
<animate attributeType="CSS" attributeName="opacity" from="1" to="0" dur="4s"
repeatCount="indefinite" end="15s fill="freeze""/>
<set attributeType="CSS" attributeName="fill" to="blue" begin="8s" />
<animate attributeName="r" from="20" to="46" dur="13s" />
</circle>
The attributeType is given the value CSS and the CSS name is defined by the attributeName attribute. For values that do not have continuous ranges, these can be changed by the set element. The results of this animation are shown in Figure 8.2.
Figure 8.2: Animating Style properties
The animateTransform element animates the transformation to be applied to a graphical object. In the example below, the scaling, rotation and translation of the duck are animated. Note that only a single transformation can be animated per element so to achieve this compound effect the path element is enclosed within two grouping elements and one transformation animation is applied to each. The result is shown in Figure 8.3.
<g> <g> <path d="M 20 100 c 40 48 120 -32 160 -6 c 0 0 5 4 10 -3 c 10 -103 50 -83 90 -42 c 0 0 20 12 30 7 c -2 12 -18 17 -40 17 c -55 -2 -40 25 -20 35 c 30 20 35 65 -30 71 c -50 4 -170 4 -200 -79 z"> <animateTransform attributeName="transform" attributeType="XML" type="scale" from="0.4" to="0.3" begin="0s" dur="4s" fill="freeze" /> </path> <animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0" to="21" begin="4s" dur="7s" fill="freeze" /> </g> <animateTransform attributeName="transform" attributeType="XML" type="translate" from="0,0" to="40,20" begin="11s" dur="4s" fill="freeze" /> </g>
Figure 8.3: Animating Transforms
To animate a colour, the animateColor element is used. For example:
<animateColor attributeType="CSS" attributeName="fill" from="aqua" to="crimson" begin="0s" dur="10s" fill="freeze"/>
The to and from attributes can have the colour specified in any of the usual ways.
8.2 Animation Control
Objects that have been animated so far have had linear movement in terms of parameter changes over the duration of the animation. Objects start and stop abruptly. For the animation elements described so far it is possible to define an attribute calcMode that specifies how the animation proceeds over time. One of its possible values is linear which is the default. A more interesting value is spline. In this case, a values attribute defines a list of values and a spline function which defines the intermediate value to be used at a specific point in time. The spline function to be used is defined by the keySplines attribute. For example:
<circle cx="10" cy="90" r="5" style="fill:black"> <animate attributeName="cy" values="90;10" calcMode="spline" keySplines="1 0 0 1" dur="10s"/> <animate attributeName="cx" values="10;140" calcMode="spline" keySplines="0 .75 .25 1" dur="10s"/> <animate attributeName="cy" values="10;90" calcMode="spline" keySplines="1 0 0 1" begin="10s" dur="6s"/> <animate attributeName="cx" values="140;10" calcMode="spline" keySplines="0 .75 .25 1" begin="10s" dur="6s"/> </circle>
The first animate element animates the cy value from 90 to 10 over 10 seconds but with the intermediate positions defined by a cubic bezier which goes from (0,0) to (1,1) with control points (1,0) and (0,1). The four coordinates of the two control points are the four values defined by the keySplines attribute. The X-axis defines the fraction of the duration passed while the Y-axis gives the fraction of the distance travelled.
In Figure 8.4, the shape of the change for various values of keySplines is shown. The top left shows that if the first control point (in grey) coincides with the start point and the second control point in green coincides with the second control point then the result is a linear change.
In the example, the (0 .75 .25 1) value defines a curve where there rapid change earlier on followed by very little change near the end. The value (1 0 0 1) has little change early and late but very rapid change in the middle period.
Figure 8.4: Spline Control
The animation of the circle defined above is shown in Figure 8.5 with the last image showing all the intermediate positions of the animated circle. The set for the first 10 seconds are in blue and the remainder in green.
Figure 8.5: Animation Control
The data associated with a path element can also be animated although there is a constraint that the various path segments making up the path must be the same in structure in both the start and finish positions. Effectively each individual value is interpolated between the start and end value. For example:
<path> <animate attributeName="d" from="M 20 100 c 40 48 120 -32 160 -6 c 0 0 5 4 10 -3 c 10 -103 50 -83 90 -42 c 0 0 20 12 30 7 c -2 12 -18 17 -40 17 c -55 -2 -40 25 -20 35 c 30 20 35 65 -30 71 c -50 4 -170 4 -200 -79" to="M 80 100 c 40 48 120 -2 160 -36 c 0 0 5 -11 10 -18 c 10 -73 50 -23 90 -12 c 0 0 20 -48 30 22 c -2 12 -18 47 -40 17 c 5 -2 20 -5 -20 35 c 30 20 35 95 -30 86 c -80 -116 -260 94 -200 -94" fill="freeze" dur="1s"/> </path>
The overall result is shown in Figure 8.6.
Figure 8.6: Animate path data
8.3 Animation along a Path
An object can be animated so that it proceeds along a specified path using the animateMotion element. For example:
<path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:red"> <animateMotion dur="6s" repeatCount="indefinite" path="M 100 150 c 0 -40 120 -80 120 -40 c 0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="auto" /> </path>
The object consists of an arrow and the animateMotion element animates along a figure of eight path defined by the cubic beziers and starting on the left side. The rotate attribute defines the orientation of the arrow as it proceeds along the path. The value auto keeps the orientation of the arrow so that it always points along the path. A value specified as a number indicates that the arrow should stay at that constant rotation from its initial position irrespective of where it is on the curve. The value auto-reverse positions the arrow so that it always points away from the direction of motion. Figure 8.7 shows four examples of the rotate attribute with the positions of the arrow as the animation takes place in each case. The latest position is opaque and the earlier positions are displayed with decreasing opacity.
Figure 8.7: Animate along a path