We have already looked at some of the ways of starting animations:

  • begin and dur: both can be defined, usually, in seconds (s) but other units are possible
  • begin="obj.click": an alternative way of starting an animation
  • begin="1s;3s;5s": a sequence of times when the animation should begin

It is also possible to start an animation based on another animation:

<animate id="start" atributeName="..."     begin="0s" dur="6s" .../>

By giving an animation element an id attribute, it is posssible to start another animation based on that element. For example:

begin="start.begin"
begin="start.end"
begin="start.begin+3s"
begin="start.end+2s"
begin="start.end-2s" this is valid as long as a valid time can be calculated

As well as clicking on an object, there are several other event based ways of starting an animation. We showed one in the tiling example. Some of the other possibilities are:

begin="obj.mouseover"
begin="obj.mouseout"
begin="obj.mousedown"
begin="obj.mouseup"

The example below illustrates these. Clicking on the top grey circle, moving over and out on the middle grey circle and pressing down and releasing the mouse over the lower grey circle moves the red circle up and down or right and left.

The lowest circle with click written on it illustrates a problem you may have. The id is on the circle element so if you click on the middle of the circle, the event will be picked up by the text element. In this case it is safer to put the text and circle in a group and put the id attribute on the g element.

click over down <circle id="clk" . . style="fill:grey" /> <circle id="overout" . . style="fill:grey" /> <circle id="downup" . . style="fill:grey" /> <circle style="fill:red" id="c1" cx="50" cy="100" r="50" /> <animate xlink:href="#c1" begin="clk.click" attributeName="cx" values="50;100;50" dur="2s" /> begin="overout.mouseover" attributeName="cx" from="100" to="150" /> begin="overout.mouseout" attributeName="cx" from="150" to="100" /> begin="downup.mousedown" attributeName="cy" from="100" to="200" /> begin="downup.mouseup" attributeName="cy" from="200" to="100" /> begin="accessKey(r)" attributeName="r" from="50" to="100" /> Shift Esc followed by r in Opera <circle id="clk2" . . style="fill:grey" /> <text style="text-anchor:middle">click</text> click

A set of animations can by synchronised by starting each one when the previous one ends. By linking the last back to the first, the whole set will animate forever.

<animate attributeName="cx" from="50" to="200" fill="freeze" id="first" xlink:href="#c1" dur="1s" begin="1s" /> <animate .. id="second" xlink:href="#c2" dur="1s" begin="first.begin" /> <animate .. id="third" xlink:href="#c2" dur="1s" begin="first.end" /> <animate .. id="fourth" xlink:href="#c2" dur="1s" begin="first.end+1s" /> Click on the cyan button Bottom row has no repeatCount: it just goes on forever!

Finally here is a simple example of chaining some objects together:

<animate xlink:href="#first" id="anima" attributeType="CSS" attributeName="opacity" 
  from="0" to="1" dur="1s" restart="never" fill="freeze" begin="circle.click" /> 
<animate xlink:href="#second" id="animb" attributeType="CSS" attributeName="opacity" 
  from="0" to="1" dur="1s" restart="never" fill="freeze" begin="anima.end" /> 
.....

Clicking on the cyan button starts a chain that gradually reveals more of the diagram.

The attribute restart controls when you are allowed to restart the animation.