Animation values over time

So far we have not discussed what the intermediate values taken by an attribute are over time. We have assumed that if a value starts at 1, say, and changes to 3 over 2 secs then half way through the animation, it will have the value 2. That happens to be the default for the elements animate, animateTransform, animateMotion.

Given that we have the animation defined by a sequence of values (from and to just gives us a pair) the attribute calcMode defines how values will be calculated for intermediate time positions. The possible values of calcMode are:

• linear: by default, animation is linear except for animateMotion when it is paced
• discrete: no interpolation, values jump from one value to the next
• paced: for those values where there is a distance function (lengths, coordinates, even colour), this method produces an even pace of change across the animation
• spline: interpolates from one value to the next in the sequence of values by a cubic Bezier spline
• a separate keyTimes attribute can be used to specify the time at each of the values in the values attribute sequence
• a separate keySplines attribute specifies how the interpolation is done between each of the keyTimes

Suppose we have:

<animate attributeName="cx" begin="1s"  dur="5s"  values="15;225;150;450;495;615" 
     calcMode="linear"   fill="green" />
     calcMode="discrete" fill="red"   />
     calcMode="paced"    fill="blue"  />    
     calcMode="spline"   fill="brown" 
                keyTimes="0;        0.2;          0.4;          0.6;        0.8;            1"
              keySplines="0.5 0 0.5 1;1 0 0.25 0.25;0 0.75 0.25 1;0.5 0 0.5 1;0 0.75 0.25 1"/>

Below is the effect:

• linear: time split equally between intervals so the speed varies depending how much the value changes in the interval
• discrete: jumps between defined values much the same as you would when making a film-based animation
• paced: smooths out the pace. You add up the length of all the intervals and then divide the time so that the speed in each interval is the same
• spline: gives finer control over the motion in each interval. We will talk more about this mode later. Suffice to say for now that keyTimes indicates what fraction of the time is allocated to each value and that the spline curve gives the way the movement takes place in the interval between two values so there is one less, in this case 6 values and 5 splines.

The diagram below shows the values at specific times and compares them with the old-style frame-based approach. The examples are:

• Frame-based: this is the standard method used in the animation industry and Flash. New values for an attribute occur at regular time intervals and you must specify each.
• SVG Discrete: extends that frame-based model by just specifying those times where the value changes
• SVG Linear: between two values the interpolated values are linear over the time interval
• SVG Paced: the total change of the value over the animation is calculated and the intermediate times are adjusted so that the change in value over time remains constant
• SVG keyTimes and keyValues: the times are given for each of the intermediate values in the sequence
• SVG keySplines: in addition the intermediate values between each pair of values in the sequence can be defined by a cubic Bezier