Animation - Timing

Animation depends a lot on timing events. SVG animation has several ways to trigger events at particular times. In order for an animation to appear continuous and smooth, this is critical. Otherwise we see a 'jerky', sporadic sequence of images.

In this illustration we use several 'trigger' events to initiate animation - the first being a 'click' event, which starts the whole thing.

Here is the code that does that:

Note that we use an 'id' for the circle, and for the animation.

Note that the id for the animation DOES NOT USE '#' as does the xlink id.

Recall that an xlink refers to the id of the object we wish to affect.

In this case, we begin the animation 1 second after the circle is clicked.

Note that our circle follows a square path, moving clock-wise, but the first leg of this path is merely a horizontal line.

Thus the attribute we are animating is the 'cx' value of the circle. And we are telling it we want to move from 'cx=100' to 'cx=400', and that this should take ('dur'ation) 1 second.

When finished, we should freeze the animation.

When coding this, the order of commands did not matter, as long as the opening and closing brackets are correctly positioned.

This works just as well:

The next 'leg' of the animation is a vertical line straight down, so we only need to adjust the 'cy' attribute.

Most of the code is similar to the previous section, however the trigger to 'begin' is different:

In this case we want this part of the animation to begin when the first section (id=c1) is finished (c1.end).

This applies to the last 2 'legs' of the animation as well - we adjust just 1 attribute at a time.

Other options for a 'begin' are:

• begin="c1.begin+1s"
  begin 1 second after 'c1' begins
• begin="c1.end+1s"
  begin 1 second after 'c1' ends
• begin="c1.end-3s"
  begin 3 seconds before 'c1' ends
• begin="circ-anim.repeat(2)"
  begin animation after the 'circ-anim' repeats twice

If we want to have a particular animation repeat, we can use the repeatCount command:

• repeatCount="3"
  this will repeat the animation 3 times

Sometimes though, we may want the animation to repeat for a certain length of time. To do that we can use repeatDur:

• repeatDur="0:30"
  repeat the animation for 30 seconds

Later we will see how to do multiple 'adjustments' of several attributes.

Animation can also be done using keyframes.

So all in all we have quite a bit of control of timing of animations.

Links:

• CSS Tricks