animate element

The animate element has the following basic attributes:

<animate  
id            = "anim1"   
attributeType = "XML"     
attributeName = "width"   
xlink:href    = "#toanim" 
values        = "100;200" 
begin         = "2s"      
dur           = "3s"      
fill          = "freeze"  
/>

Additional timing attributes are end, min, max, repeatCount and repeatDur that will be discussed later.

Additional values attributes are from, to, by, calcMode, keyTimes and keySplines that will be discussed later.

The animate element provides good control over when an animation starts, the sequence of values to be used, how those values change over time, the duration of an animation and what event causes the animation to start.

The meanings of the attributes used above are:

id: Unique id, can be used for chaining animations together
attributeType: 'XML' indicates an attribute, 'CSS' indicates a CSS property, default is 'XML'
attributeName: Name of the attribute/property to be animated
xlink:href: A link to the element to be animated, not always necessary
values: A sequence of values that the attribute will take
begin: When the animation begins
dur: How long the animation lasts
fill: What value is taken by the attribute at completion, 'freeze' or 'remove', default is 'remove"

Here is a simple example:

<circle id="c1" r="30" style="fill:red"> 
<animate attributeType="XML" attributeName="r" values="30;50;10;30" fill="freeze" 
    dur="3s" begin="c1.click"> 
</circle> 
<circle id="c2" r="30" style="fill:blue; opacity:1"> 
<animate attributeType="CSS" attributeName="opacity" values="1;0;1" fill="freeze" 
    dur="3s" begin="c2.click"> 
</circle>

Click on each circle and you will see what happens.

The animate command either operates on the element referred to by the xlink:href attribute or, if not present, the parent of the animate command. In both these cases, the parent element is animated.

The red circle has its r attribute animated from 30 to 50 then 10 and finally back to 30. If just two values are specified they define the start and end values. If more than two, the values define start, intermediate and end values. By default, the duration of the animation is split equally for each interval. In this case each interval will take place over 1 second.

The second circle has its CSS opacity property animated from 1 to 0 and back to 1 in a similar manner. In both cases the starting time is when the circle itself is clicked. An alternative would be to give a precise time like begin="0s" but, in our example, you might have missed the animation before you had read down the page far enough.

Here is a similar simple example:

<circle id="c1" r="30" style="fill:red" /> 
<circle id="c2" r="30" style="fill:blue; opacity:1" /> 
<animate xlink:href="#c1" attributeType="XML" attributeName="r" values="30;50;10;30" fill="freeze" 
    dur="3s" begin="c1.click"> 
<animate xlink:href="#c2" attributeType="CSS" attributeName="opacity" values="1;0;1" fill="freeze" 
    dur="3s" begin="c2.click">

which would generate the same animation. Simple animations can be conveniently generated using the first method while for complex animation with hundreds of animate commands, it often makes sense to place all the animate commands together in chronolgical order.

animate element

Navigation