Chapter 9  Interactivity and Animation

Extract

KeyTimes

keyTimes = "list of values between 0 and 1"
There must be exactly as many values in keyTimes list as in values list.
Each successive time value must be greater than or equal to the preceding time value.
Each value represents a proportional offset into the simple duration of the animation element.  
With calcMode = 'paced', this attribute is ignored.

With this example :
keyTimes="0;0.195;0.405;0.7;1" values="0;400;47.5;450;500", if we have a duration of 10 seconds ( dur="10" ), and that values are for width attribute of a rectangle, we get this animation :

From 0 to 1.95s, width of rectangle increase from 0 to 400
from 1.95s to 4.05s width of rectangle decrease from 400 to 47.5
from 4.05s to 7s width of rectangle increase from 47.5 to 450
and
from 7s to 10s ( end of animation ) width increase from 450 to 500.

If we get no values for keySplines, speed of animation is the same on each part.

Figure 9-3. KeyTimes and values

( play with keyTimes in svg file )

KeySplines

keySplines = "list of list of 4 numbers between 0 and 1"

A set of Bézier control points associated with the keyTimes list, defining a cubic Bézier function that controls interval pacing.
If there is no value for keyTimes, we can use a cubic Bezier function that controls pacing for the whole animation.
If calcMode is not "spline", this attribute is ignored.

With our previous example :

keyTimes="0;0.195;0.405;0.7;1" values="0;400;47.5;450;500"
we add keySplines="0,0.5,0.5,1;0.5,0,1,0.5;0,0.5,0.5,1;0,0.5,0.5,1" and calcMode="spline"
we get same four steps in animation, but we have speed which increase on steps 1  3  4 and decrease on step 2

Figure 9-4. KeySplines and speed

Figure 9-5. KeySplines and speed

( play with keySplines in svg file )

Figures 9-4 and 9-5 show how is speed with two examples of values for keySplines

We can use keyPoints for animateMotion ( see below )