2008-03-14T19:03:10Z

ToF: /* Discussion */

specification for an initial implementation of SVG animation features.

launchpad blueprint:

inkscape-devel [http://www.nabble.com/Animation-%28was%3A-Re%3A-Inkscape---GSoC-%2708-proposal%29-td15791409.html discussion]

== Summary ==

== Rationale ==

== Design ==

=== Document Handling ===

=== User Interface ===

== Deliverables ==

== Discussion ==

* Is the Inkscape canvas fast enough for fast animation ?
* A complex UI like the timeline widget could benefit from a canvas API (e.g. goocanvas). But hey Inkscape already sports a canvas ! So does the Inkscape canvas could also be used for a custom GtkWidget ?
* Keep in mind the coming [[0.47_Refactoring_Plan |refactoring effort]]

SpecSVGAnimation

2008-03-12T18:29:58Z

ToF: /* Discussion */

SpecSVGAnimation

2008-03-12T16:29:33Z

ToF:

SpecSVGAnimation

2008-03-12T16:03:19Z

ToF: /* Discussion */

specification for an initial implementation of SVG animation features.

launchpad blueprint:

== Summary ==

== Rationale ==

== Design ==

=== Document Handling ===

=== User Interface ===

== Deliverables ==

== Discussion ==

* Is the Inkscape canvas fast enough for fast animation ?
* A complex UI like the timeline widget could benefit from a canvas API (e.g. goocanvas). But hey Inkscape already sports a canvas ! So does the Inkscape canvas could also be used for a custom GtkWidget ?

SpecSVGAnimation

2008-03-12T16:02:32Z

ToF: /* Discussion */

SpecSVGAnimation

2008-03-12T12:29:08Z

ToF: page creation

SVG Animation UI

2008-03-11T18:51:48Z

ToF: /* User Interface ideas for SVG Animation */

User:ToF

2008-03-11T18:49:15Z

ToF:

My name is Christophe Dehais aka ToF.

My POV is the one of the programmer and the user (without any artistic skill).

SVG Animation UI

2008-03-11T18:45:03Z

ToF: /* User Interface ideas for SVG Animation */

ToF:

File:Bouncing ball2.svg

2008-03-09T22:38:18Z

ToF:

2008-03-09T21:54:19Z

ToF:

SVG Animation

2008-03-09T21:53:04Z

ToF: /* Examples */

This page is a '''work in progress'''. [[User:ToF|ToF]]

== SVG Animation ==

Animation in SVG is defined in the Animation Module of the [http://www.w3.org/TR/SVG11/animate.html SVG specification]. Animation in SVG conforms to the [http://www.w3.org/TR/2001/REC-smil-animation-20010904/ SMIL specification] (Synchronized Multimedia Integration Language) and extends it (SVG is said to be a ''host'' language of SMIL).

Here I only focus on procedural animation and not programmatic animation (using a scripting language manipulating the DOM).

In SMIL an animation is an object which defines the evolution of a given attribute of a given object (here an SVG element - path, rect, group...) over time. Multiple animations can control the evolution of particular attribute: for example, one will tell the object to turn for 1 second starting at t=0 second and another to move across the document for 2 seconds starting at a later time. So we have this relation:
1:n
Element <-------> Animation

For a given animation the element which is controlled is called the '''target''' element of the animation. The specific attribute/property which is controlled is called the '''target''' attribute/property.

In fact, it's completely legal to have two animations that control the same attribute of the same element, and they can overlap in time: at any particular time there exists a ''stack'' of animations applying to a particular attribute, and SMIL defines the order in which each animation is applied.

== Animation elements ==

SVG defines 5 animation elements:
* '''animate'''
This element is used to animate any scalar attribute or property, such as the <code>width</code> attribute of an svg:rect element or the CCS property <code>opacity</code>
* '''animateMotion'''
This elements only controls the position of a SVG element, by telling it to follow a given path
* '''animateColor'''
This element controls the animation of color valued attributes and properties.
* '''animateTransform'''
This element controls the transformation which applies to the target element. It replaces or adds up to the <code>transform</code> attribute of the element.
* '''set'''
This element is used to set a particular value for the target attribute during a specified time interval. It is mainly used for animating attributes which do not span a continuous domain, such as boolean values like the <code>visibility</code> property.

== Specifying the target element and property ==

There are 2 ways to tell which element a given animation will target. The first one is to embed the [[#Animation elements|animation element]] as a child tag of the element to animate. Here is an example:
<pre>
<circle cx="100px" cy="100px" r="20px">
<animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px">
</circle>
</pre>

The <code>animate</code> element targets the radius (<code>r</code>) property of the parent <code>circle</code> element. Starting 1 second after the document start, the radius will grow for 2 seconds from 20 pixels to 50 pixels. When nothing else is specified, the animation only applies in its interval of time, here [1-3] seconds; from 0 to 1 second and then from 3 second and after, the circle's radius is set back to its ''static'' attribute value, here 20 pixels.

The other way to specify the target element is to reference it in via an <code>xlink:href</code> attribute of the animation element. the previous animation could be written this way:
<pre>
<circle id="balloon" cx="100px" cy="100px" r="20px" />
<animate xlink:href="#balloon" attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px" />
</pre>

To specify which property or attribute of the target element is controlled, we use the two attributes <code>attributeName</code> and <code>attributeType</code>. <code>attributeName</code> explains itself, it's the name of the controlled attribute. <code>attributeType</code> tells whether <code>attributeName</code> is searched among the SVG attributes of the element (<code>attributeType="XML"</code>) or among the CSS properties of the element (<code>attributeType="CSS"</code>). [http://www.w3.org/TR/SVG11/animate.html#TargetElement (SPEC)]

== Timing an animation ==

The first thing to stress is that SMIL (and therefore SVG) animation is '''time-based''', as opposed to '''frame-based'''. '''Frame-based''' animation is something traditional animators are used to, because they actually draw each image of the animation on a separate celluloid sheet, and the timing is related to the rate of images per second the camera will capture. When animation is done on a computer, the animator doesn't draw every image but only some ''key'' images (or ''keyframes'') and then the animation software creates all the necessary images for him (the so-called ''in-betweens''). That means the animator can focus back to a (real-)time based timing. Each keyframe is positioned on a timeline with real time values (instead of frame numbers). Of course at the end the animation is discrete and there is a fixed number of images computed inbetween two keyframes, but the neat property of specifying keyframes at time position is that the final animation frame rate is scalable and the animator doesn't have to care about it anymore. He just tells the software to produce 24 images each second if he targets a theatre film or say 10 images per second for low-bandwidth web animation. The animator doesn't need to reposition the keyframes.

=== In-betweening by interpolation ===

Creating the inbetween images on a computer is done by mean of '''interpolation'''. Interpolation is a mathematical tool that can reconstruct a the continuous evolution of a parameter given a set of discrete values of this parameter over time.
The following image illustrates that. We know that some attribute A must take value A0, A1, A2 and A3 at times t0, t1, t2 and t3. The red curves is one of the possible continuous function that be used to compute inbetween values of A in the interval [t0, t3].

[[Image:interpolation.png]]

* which extent of time ?
* Which extent of time ?
The first aspect that characterizes an animation is the interval of time on which it applies: when does it begin, when does it end or how long does it run.
Any of the above mentioned [[#Animation elements|animation elements] accept the attributes <code>begin</code>, <code>end</code> and <code>dur</code>.

There are many ways to define a particular point in time and this is what makes SMIL a very rich animation framework (see below). The simplest is to specify a clock-value which syntax is quite intuitive [http://www.w3.org/TR/SVG11/animate.html#ClockValueSyntax (SPEC)]. Depending on the combination of those 3 attributes, the interval of time of the animation will be [begin, end], [begin, begin+dur], [end-dur, end], etc.

To specify the values taken over the time interval, one need to tell the value that the parameter must have at the begin and at the end of the interval. here again those values are specified by combinations of three attributes: <code>from</code>, <code>to</code> and <code>by</code>. The attribute <code>from</code> correspond to the begin value, the attribute <code>to</code> correspond to the end value. The attribute <code>by</code> let you define either the initial and final values relative to the other one, that is to = from + by or from = to - by. The following image illusttrate this setup for our hypothetical attribute A

[[Image:time_interval.png]]

The values of A are simply interpolated '''linearly''' in between begin and end. This is the more simple form of '''animation function''' that can defined: by the two extremal pairs of (time, attribute value): (begin, from) and (end, to).

=== More complex timing ===

It's possible to specify a whole set of (keytime, keyvalue) pairs to define the animation function. Each item of the pairs are actually given separately:
* the set of attribute values (keyvalues) are given by the <code>values</code> attribute.
* the set of time values (keytimes) are given by the <code>keyTimes</code> attribute.

Each set as the form of a semicolon-separated list of values. The thing to notice is that the keytimes are actually '''normalized to [0,1]''', which means that 0 maps to begin and 1 maps to end, and those values must start and end the list of keytimes. The image below illustrates all this:

[[Image:time_interval2.png]]

The keyTimes list can actually be omitted. In this cases the keytimes are evenly in interval [0,1] (equivalently, evenly in the interval [begin, end])

The (keytime, keyvalue) pairs are joined by straight lines in the above graph, which means that we use '''linear interpolation''' for computing the inbetween values.

When applied to the position of an object, linear interpolation results in un-natural robot-like motions (which may the effect wanted). SMIL allows smoother animations by defining '''spline-based interpolation''' between two (keytime, keyvalue) pairs. For each interval (t0, v0) - (t1, v1) a spline can be defined by two control points defining the tangents of the spline at t0 and t1. Those control points are passed in the attribute <code>keySplines</code>

[[Image:spline_interpolation.png]]

Two other interpolation modes are possible:
* '''discrete''': this is a degenerate form of interpolation, because the resulting animation function is not continuous. For each interval (t0,v0) - (t1, v1), the attribute value is set to v0 for the whole interval. It ''jumps'' to v1 right when t1 is reached and so on.
* '''paced''': in this interpolation mode, the attribute is interpolated so that its evolution over time has '''constant speed'''. Because the animation function is defined implicitly, the attribute <code>keyTimes</code> is not taken into account. This mode is mainly useful for the <code>animateMotion</code> element.

=== Other aspects of animation ===
* repeating
* chaining animations.
* event based synchronisation

== Examples ==

Examples showcasing some of the effects that can be achieved using procedural animation in SVG.

<table style="border: solid black 1px;">
<tr>


<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball1.png]]
</td>
</tr>


<tr>
<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball2.png]]
</td>
</tr>


<tr>
<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball3.png]]
</td>
</tr>

</table>

== Useful tools ==

* [http://xmlgraphics.apache.org/batik/tools/browser.html Squiggle ], as part of [http://xmlgraphics.apache.org/batik/ Batik 1.7] has a nearly complete support for SMIL Animation. The [[#Examples|examples]] were all rendered using Squiggle.
* Inkscape ! I used the xml editor to manually add the animation elements for my test. It's a bit more cumbersome than editing the svg file in a text editor, but doing that in Inkscape eases the computation of key positions (just move the object around and read the position values).

== Various thoughts ==

* There is no direct way to specify a <b>''ping-pong'' animation</b> in SVG, that is to tell an animation to go back in time when it reaches it's end. To implement this, I see 2 solutions:
**double the duration d of the animation (<code>dur</code> attribute) et apply a scale and a symetry around t=0.5 to the animation function. For example the simple linear interpolation defined by <code>keyTimes="0; 1"</code> and <code>keyPoints="0;1"</code> becomes <code>keyTimes="0; 0.5; 1"</code> and <code>keyPoints="0;1;0"</code>. This doesn't work for <code>paced</code> animation though (which make use of an implicit, user-agent dependent animation function).
** copy the original animation (call it e.g. <code>motion_forward</code>) and swap the <code>from</code> and <code>to</code> values in the copy. Then specify <code>begin="motion_forward.end"</code> to tell the backward animation to start right at the end of the forward animation. This should work for every animation type.

The question is: what maps best to a UI ?

SVG Animation

2008-03-09T21:52:11Z

ToF: /* Examples */

This page is a '''work in progress'''. [[User:ToF|ToF]]

== SVG Animation ==

Animation in SVG is defined in the Animation Module of the [http://www.w3.org/TR/SVG11/animate.html SVG specification]. Animation in SVG conforms to the [http://www.w3.org/TR/2001/REC-smil-animation-20010904/ SMIL specification] (Synchronized Multimedia Integration Language) and extends it (SVG is said to be a ''host'' language of SMIL).

Here I only focus on procedural animation and not programmatic animation (using a scripting language manipulating the DOM).

In SMIL an animation is an object which defines the evolution of a given attribute of a given object (here an SVG element - path, rect, group...) over time. Multiple animations can control the evolution of particular attribute: for example, one will tell the object to turn for 1 second starting at t=0 second and another to move across the document for 2 seconds starting at a later time. So we have this relation:
1:n
Element <-------> Animation

For a given animation the element which is controlled is called the '''target''' element of the animation. The specific attribute/property which is controlled is called the '''target''' attribute/property.

In fact, it's completely legal to have two animations that control the same attribute of the same element, and they can overlap in time: at any particular time there exists a ''stack'' of animations applying to a particular attribute, and SMIL defines the order in which each animation is applied.

== Animation elements ==

SVG defines 5 animation elements:
* '''animate'''
This element is used to animate any scalar attribute or property, such as the <code>width</code> attribute of an svg:rect element or the CCS property <code>opacity</code>
* '''animateMotion'''
This elements only controls the position of a SVG element, by telling it to follow a given path
* '''animateColor'''
This element controls the animation of color valued attributes and properties.
* '''animateTransform'''
This element controls the transformation which applies to the target element. It replaces or adds up to the <code>transform</code> attribute of the element.
* '''set'''
This element is used to set a particular value for the target attribute during a specified time interval. It is mainly used for animating attributes which do not span a continuous domain, such as boolean values like the <code>visibility</code> property.

== Specifying the target element and property ==

There are 2 ways to tell which element a given animation will target. The first one is to embed the [[#Animation elements|animation element]] as a child tag of the element to animate. Here is an example:
<pre>
<circle cx="100px" cy="100px" r="20px">
<animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px">
</circle>
</pre>

The <code>animate</code> element targets the radius (<code>r</code>) property of the parent <code>circle</code> element. Starting 1 second after the document start, the radius will grow for 2 seconds from 20 pixels to 50 pixels. When nothing else is specified, the animation only applies in its interval of time, here [1-3] seconds; from 0 to 1 second and then from 3 second and after, the circle's radius is set back to its ''static'' attribute value, here 20 pixels.

The other way to specify the target element is to reference it in via an <code>xlink:href</code> attribute of the animation element. the previous animation could be written this way:
<pre>
<circle id="balloon" cx="100px" cy="100px" r="20px" />
<animate xlink:href="#balloon" attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px" />
</pre>

To specify which property or attribute of the target element is controlled, we use the two attributes <code>attributeName</code> and <code>attributeType</code>. <code>attributeName</code> explains itself, it's the name of the controlled attribute. <code>attributeType</code> tells whether <code>attributeName</code> is searched among the SVG attributes of the element (<code>attributeType="XML"</code>) or among the CSS properties of the element (<code>attributeType="CSS"</code>). [http://www.w3.org/TR/SVG11/animate.html#TargetElement (SPEC)]

== Timing an animation ==

The first thing to stress is that SMIL (and therefore SVG) animation is '''time-based''', as opposed to '''frame-based'''. '''Frame-based''' animation is something traditional animators are used to, because they actually draw each image of the animation on a separate celluloid sheet, and the timing is related to the rate of images per second the camera will capture. When animation is done on a computer, the animator doesn't draw every image but only some ''key'' images (or ''keyframes'') and then the animation software creates all the necessary images for him (the so-called ''in-betweens''). That means the animator can focus back to a (real-)time based timing. Each keyframe is positioned on a timeline with real time values (instead of frame numbers). Of course at the end the animation is discrete and there is a fixed number of images computed inbetween two keyframes, but the neat property of specifying keyframes at time position is that the final animation frame rate is scalable and the animator doesn't have to care about it anymore. He just tells the software to produce 24 images each second if he targets a theatre film or say 10 images per second for low-bandwidth web animation. The animator doesn't need to reposition the keyframes.

=== In-betweening by interpolation ===

Creating the inbetween images on a computer is done by mean of '''interpolation'''. Interpolation is a mathematical tool that can reconstruct a the continuous evolution of a parameter given a set of discrete values of this parameter over time.
The following image illustrates that. We know that some attribute A must take value A0, A1, A2 and A3 at times t0, t1, t2 and t3. The red curves is one of the possible continuous function that be used to compute inbetween values of A in the interval [t0, t3].

[[Image:interpolation.png]]

* which extent of time ?
* Which extent of time ?
The first aspect that characterizes an animation is the interval of time on which it applies: when does it begin, when does it end or how long does it run.
Any of the above mentioned [[#Animation elements|animation elements] accept the attributes <code>begin</code>, <code>end</code> and <code>dur</code>.

There are many ways to define a particular point in time and this is what makes SMIL a very rich animation framework (see below). The simplest is to specify a clock-value which syntax is quite intuitive [http://www.w3.org/TR/SVG11/animate.html#ClockValueSyntax (SPEC)]. Depending on the combination of those 3 attributes, the interval of time of the animation will be [begin, end], [begin, begin+dur], [end-dur, end], etc.

To specify the values taken over the time interval, one need to tell the value that the parameter must have at the begin and at the end of the interval. here again those values are specified by combinations of three attributes: <code>from</code>, <code>to</code> and <code>by</code>. The attribute <code>from</code> correspond to the begin value, the attribute <code>to</code> correspond to the end value. The attribute <code>by</code> let you define either the initial and final values relative to the other one, that is to = from + by or from = to - by. The following image illusttrate this setup for our hypothetical attribute A

[[Image:time_interval.png]]

The values of A are simply interpolated '''linearly''' in between begin and end. This is the more simple form of '''animation function''' that can defined: by the two extremal pairs of (time, attribute value): (begin, from) and (end, to).

=== More complex timing ===

It's possible to specify a whole set of (keytime, keyvalue) pairs to define the animation function. Each item of the pairs are actually given separately:
* the set of attribute values (keyvalues) are given by the <code>values</code> attribute.
* the set of time values (keytimes) are given by the <code>keyTimes</code> attribute.

Each set as the form of a semicolon-separated list of values. The thing to notice is that the keytimes are actually '''normalized to [0,1]''', which means that 0 maps to begin and 1 maps to end, and those values must start and end the list of keytimes. The image below illustrates all this:

[[Image:time_interval2.png]]

The keyTimes list can actually be omitted. In this cases the keytimes are evenly in interval [0,1] (equivalently, evenly in the interval [begin, end])

The (keytime, keyvalue) pairs are joined by straight lines in the above graph, which means that we use '''linear interpolation''' for computing the inbetween values.

When applied to the position of an object, linear interpolation results in un-natural robot-like motions (which may the effect wanted). SMIL allows smoother animations by defining '''spline-based interpolation''' between two (keytime, keyvalue) pairs. For each interval (t0, v0) - (t1, v1) a spline can be defined by two control points defining the tangents of the spline at t0 and t1. Those control points are passed in the attribute <code>keySplines</code>

[[Image:spline_interpolation.png]]

Two other interpolation modes are possible:
* '''discrete''': this is a degenerate form of interpolation, because the resulting animation function is not continuous. For each interval (t0,v0) - (t1, v1), the attribute value is set to v0 for the whole interval. It ''jumps'' to v1 right when t1 is reached and so on.
* '''paced''': in this interpolation mode, the attribute is interpolated so that its evolution over time has '''constant speed'''. Because the animation function is defined implicitly, the attribute <code>keyTimes</code> is not taken into account. This mode is mainly useful for the <code>animateMotion</code> element.

=== Other aspects of animation ===
* repeating
* chaining animations.
* event based synchronisation

== Examples ==

Examples showcasing some of the effects that can be achieved using procedural animation in SVG.

<table style="border: solid black 1px;">
<tr>


<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball1.png]]
</td>


<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball2.png]]
</td>


<td>
A ball bounces on the floor: there are 2 motions
</td>
<td></td>
<td>
[[Image:bouncing_ball3.png]]
</td>

</tr>

</table>

== Useful tools ==

* [http://xmlgraphics.apache.org/batik/tools/browser.html Squiggle ], as part of [http://xmlgraphics.apache.org/batik/ Batik 1.7] has a nearly complete support for SMIL Animation. The [[#Examples|examples]] were all rendered using Squiggle.
* Inkscape ! I used the xml editor to manually add the animation elements for my test. It's a bit more cumbersome than editing the svg file in a text editor, but doing that in Inkscape eases the computation of key positions (just move the object around and read the position values).

== Various thoughts ==

* There is no direct way to specify a <b>''ping-pong'' animation</b> in SVG, that is to tell an animation to go back in time when it reaches it's end. To implement this, I see 2 solutions:
**double the duration d of the animation (<code>dur</code> attribute) et apply a scale and a symetry around t=0.5 to the animation function. For example the simple linear interpolation defined by <code>keyTimes="0; 1"</code> and <code>keyPoints="0;1"</code> becomes <code>keyTimes="0; 0.5; 1"</code> and <code>keyPoints="0;1;0"</code>. This doesn't work for <code>paced</code> animation though (which make use of an implicit, user-agent dependent animation function).
** copy the original animation (call it e.g. <code>motion_forward</code>) and swap the <code>from</code> and <code>to</code> values in the copy. Then specify <code>begin="motion_forward.end"</code> to tell the backward animation to start right at the end of the forward animation. This should work for every animation type.

The question is: what maps best to a UI ?

File:Bouncing ball3.png

2008-03-09T21:49:33Z

ToF:

File:Bouncing ball2.png

2008-03-09T21:49:19Z

ToF:

2008-03-09T20:24:23Z

ToF: /* More complex timing */

This page is a '''work in progress'''. [[User:ToF|ToF]]

== SVG Animation ==

Animation in SVG is defined in the Animation Module of the [http://www.w3.org/TR/SVG11/animate.html SVG specification]. Animation in SVG conforms to the [http://www.w3.org/TR/2001/REC-smil-animation-20010904/ SMIL specification] (Synchronized Multimedia Integration Language) and extends it (SVG is said to be a ''host'' language of SMIL).

Here I only focus on procedural animation and not programmatic animation (using a scripting language manipulating the DOM).

In SMIL an animation is an object which defines the evolution of a given attribute of a given object (here an SVG element - path, rect, group...) over time. Multiple animations can control the evolution of particular attribute: for example, one will tell the object to turn for 1 second starting at t=0 second and another to move across the document for 2 seconds starting at a later time. So we have this relation:
1:n
Element <-------> Animation

For a given animation the element which is controlled is called the '''target''' element of the animation. The specific attribute/property which is controlled is called the '''target''' attribute/property.

In fact, it's completely legal to have two animations that control the same attribute of the same element, and they can overlap in time: at any particular time there exists a ''stack'' of animations applying to a particular attribute, and SMIL defines the order in which each animation is applied.

== Animation elements ==

SVG defines 5 animation elements:
* '''animate'''
This element is used to animate any scalar attribute or property, such as the <code>width</code> attribute of an svg:rect element or the CCS property <code>opacity</code>
* '''animateMotion'''
This elements only controls the position of a SVG element, by telling it to follow a given path
* '''animateColor'''
This element controls the animation of color valued attributes and properties.
* '''animateTransform'''
This element controls the transformation which applies to the target element. It replaces or adds up to the <code>transform</code> attribute of the element.
* '''set'''
This element is used to set a particular value for the target attribute during a specified time interval. It is mainly used for animating attributes which do not span a continuous domain, such as boolean values like the <code>visibility</code> property.

== Specifying the target element and property ==

There are 2 ways to tell which element a given animation will target. The first one is to embed the [[#Animation elements|animation element]] as a child tag of the element to animate. Here is an example:
<pre>
<circle cx="100px" cy="100px" r="20px">
<animate attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px">
</circle>
</pre>

The <code>animate</code> element targets the radius (<code>r</code>) property of the parent <code>circle</code> element. Starting 1 second after the document start, the radius will grow for 2 seconds from 20 pixels to 50 pixels. When nothing else is specified, the animation only applies in its interval of time, here [1-3] seconds; from 0 to 1 second and then from 3 second and after, the circle's radius is set back to its ''static'' attribute value, here 20 pixels.

The other way to specify the target element is to reference it in via an <code>xlink:href</code> attribute of the animation element. the previous animation could be written this way:
<pre>
<circle id="balloon" cx="100px" cy="100px" r="20px" />
<animate xlink:href="#balloon" attributeName="r" attributeType="XML" begin="1s" dur="2s" from="20px" to="50px" />
</pre>

To specify which property or attribute of the target element is controlled, we use the two attributes <code>attributeName</code> and <code>attributeType</code>. <code>attributeName</code> explains itself, it's the name of the controlled attribute. <code>attributeType</code> tells whether <code>attributeName</code> is searched among the SVG attributes of the element (<code>attributeType="XML"</code>) or among the CSS properties of the element (<code>attributeType="CSS"</code>). [http://www.w3.org/TR/SVG11/animate.html#TargetElement (SPEC)]

== Timing an animation ==

The first thing to stress is that SMIL (and therefore SVG) animation is '''time-based''', as opposed to '''frame-based'''. '''Frame-based''' animation is something traditional animators are used to, because they actually draw each image of the animation on a separate celluloid sheet, and the timing is related to the rate of images per second the camera will capture. When animation is done on a computer, the animator doesn't draw every image but only some ''key'' images (or ''keyframes'') and then the animation software creates all the necessary images for him (the so-called ''in-betweens''). That means the animator can focus back to a (real-)time based timing. Each keyframe is positioned on a timeline with real time values (instead of frame numbers). Of course at the end the animation is discrete and there is a fixed number of images computed inbetween two keyframes, but the neat property of specifying keyframes at time position is that the final animation frame rate is scalable and the animator doesn't have to care about it anymore. He just tells the software to produce 24 images each second if he targets a theatre film or say 10 images per second for low-bandwidth web animation. The animator doesn't need to reposition the keyframes.

The concepts:
* Interpolation
Creating the inbetween images on a computer is done by mean of '''interpolation'''. Interpolation is a mathematical tool that can reconstruct a the continuous evolution of a parameter given a set of discrete values of this parameter over time.
The following image illustrates that. We know that some attribute A must take value A0, A1, A2 and A3 at times t0, t1, t2 and t3. The red curves is one of the possible continuous function that be used to compute inbetween values of A in the interval [t0, t3].

[[Image:interpolation.png]]

* which extent of time ?
* Which extent of time ?
The first aspect that characterizes an animation is the interval of time on which it applies: when does it begin, when does it end or how long does it run.
Any of the above mentioned [[#Animation elements|animation elements] accept the attributes <code>begin</code>, <code>end</code> and <code>dur</code>.

There are many ways to define a particular point in time and this is what makes SMIL a very rich animation framework (see below). The simplest is to specify a clock-value which syntax is quite intuitive [http://www.w3.org/TR/SVG11/animate.html#ClockValueSyntax (SPEC)]. Depending on the combination of those 3 attributes, the interval of time of the animation will be [begin, end], [begin, begin+dur], [end-dur, end], etc.

To specify the values taken over the time interval, one need to tell the value that the parameter must have at the begin and at the end of the interval. here again those values are specified by combinations of three attributes: <code>from</code>, <code>to</code> and <code>by</code>. The attribute <code>from</code> correspond to the begin value, the attribute <code>to</code> correspond to the end value. The attribute <code>by</code> let you define either the initial and final values relative to the other one, that is to = from + by or from = to - by. The following image illusttrate this setup for our hypothetical attribute A

[[Image:time_interval.png]]

The values of A are simply interpolated '''linearly''' in between begin and end. This is the more simple form of '''animation function''' that can defined: by the two extremal pairs of (time, attribute value): (begin, from) and (end, to).

=== More complex timing ===

It's possible to specify a whole set of (keytime, keyvalue) pairs to define the animation function. Each item of the pairs are actually given separately:
* the set of attribute values (keyvalues) are given by the <code>values</code> attribute.
* the set of time values (keytimes) are given by the <code>keyTimes</code> attribute.

Each set as the form of a semicolon-separated list of values. The thing to notice is that the keytimes are actually '''normalized to [0,1]''', which means that 0 maps to begin and 1 maps to end, and those values must start and end the list of keytimes. The image below illustrates all this:

[[Image:time_interval2.png]]

The keyTimes list can actually be omitted. In this cases the keytimes are evenly in interval [0,1] (equivalently, evenly in the interval [begin, end])

The (keytime, keyvalue) pairs are joined by straight lines in the above graph, which means that we use '''linear interpolation''' for computing the inbetween values.

When applied to the position of an object, linear interpolation results in un-natural robot-like motions (which may the effect wanted). SMIL allows smoother animations by defining '''spline-based interpolation''' between two (keytime, keyvalue) pairs. For each interval (t0, v0) - (t1, v1) a spline can be defined by two control points defining the tangents of the spline at t0 and t1. Those control points are passed in the attribute <code>keySplines</code>

[[Image:spline_interpolation.png]]

Two other interpolation modes are possible:
* '''discrete''': this is a degenerate form of interpolation, because the resulting animation function is not continuous. For each interval (keytime_1, keyvalue_1) - (keytime_2, keyvalue_2), the attribute value is set to keyvalue_1. It ''jumps'' to keyvalue_2 right after keytime_2 and so on.
* '''paced''': in this interpolation mode, the attribute is interpolated so that its evolution over time has '''constant speed'''. Because the animation function is defined implicitly, the attribute <code>keyTimes</code> is not taken into account. This mode is mainly useful for the <code>animateMotion</code> element.

=== Other aspects of animation ===
* repeating
* chaining animations.
* event based synchronisation

== Examples ==

The following examples showcase some of the effects that can be achieved using procedural animation in SVG.

== Useful tools ==

* [http://xmlgraphics.apache.org/batik/tools/browser.html Squiggle ], as part of [http://xmlgraphics.apache.org/batik/ Batik 1.7] has a nearly complete support for SMIL Animation. The [[#Examples|examples]] were all rendered using Squiggle.
* Inkscape ! I used the xml editor to manually add the animation elements for my test. It's a bit more cumbersome than editing the svg file in a text editor, but doing that in Inkscape eases the computation of key positions (just move the object around and read the position values).

== Various thoughts ==

* There is no direct way to specify a <b>''ping-pong'' animation</b> in SVG, that is to tell an animation to go back in time when it reaches it's end. To implement this, I see 2 solutions:
**double the duration d of the animation (<code>dur</code> attribute) et apply a scale and a symetry around t=0.5 to the animation function. For example the simple linear interpolation defined by <code>keyTimes="0; 1"</code> and <code>keyPoints="0;1"</code> becomes <code>keyTimes="0; 0.5; 1"</code> and <code>keyPoints="0;1;0"</code>. This doesn't work for <code>paced</code> animation though (which make use of an implicit, user-agent dependent animation function).
** copy the original animation (call it e.g. <code>motion_forward</code>) and swap the <code>from</code> and <code>to</code> values in the copy. Then specify <code>begin="motion_forward.end"</code> to tell the backward animation to start right at the end of the forward animation. This should work for every animation type.

The question is: what maps best to a UI ?