mozilla

Compare Revisions

SVG animation with SMIL

Change Revisions

Revision 67309:

Revision 67309 by sebmozilla on

Revision 67310:

Revision 67310 by jswisher on

Title:
SVG animation with SMIL
SVG animation with SMIL
Slug:
SVG/SVG_animation_with_SMIL
SVG/SVG_animation_with_SMIL
Tags:
SVG, "SVG Animation", animation, "Firefox 4", "Gecko 2.0"
SVG, "SVG Animation", animation, "Firefox 4", "Gecko 2.0"
Content:

Revision 67309
Revision 67310
n14      Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for n14      Gecko 2.0 {{ geckoRelease("2.0") }} introduced support for 
>animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class>animating <a href="/en/SVG" title="en/SVG">SVG</a> using <a class
>=" external" href="http://www.w3.org/TR/REC-smil" title="http://w>=" external" href="http://www.w3.org/TR/REC-smil" title="http://w
>ww.w3.org/TR/REC-smil">Synchronized Multimedia Integration Langua>ww.w3.org/TR/REC-smil">Synchronized Multimedia Integration Langua
>ge</a> (SMIL). SMIL allows you to animate the numeric attributes >ge</a> (SMIL). SMIL allows you to:
>of an element (x, y, ...), their transform attributes (translatio 
>n or rotation), their color attributes or follow a motion path. T 
>his is done adding an SVG element like <span class="author-g-shbl 
>2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside the SVG e 
>lement to animate. Below are examples for the 4 different ways. 
15    </p>
16    <ul>
17      <li>animate the numeric attributes of an element (x, y, ...
 >)
18      </li>
19      <li>animate transform attributes (translation or rotation)
20      </li>
21      <li>animate color attributes
22      </li>
23      <li>follow a motion path
24      </li>
25    </ul>
26    <p>
27      This is done adding an SVG element like <span class="author
 >-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }}</span> inside th
 >e SVG element to animate. Below are examples for the four differe
 >nt ways.
n17      Animating Attributes of an elementn30      Animating attributes of an element
n20      The following example animates the cx atribute of a circle.n33      The following example animates the <strong>cx</strong> attr
> To do so, we add an <span class="author-g-shbl2alwmr0wm7ko">{{ S>ibute of a circle. To do so, we add an <span class="author-g-shbl
>VGElement("animate") }} element inside the</span> <span class="au>2alwmr0wm7ko">{{ SVGElement("animate") }} element inside the</spa
>thor-g-shbl2alwmr0wm7ko">{{ SVGElement("circle") }} element. The >n> <span class="author-g-shbl2alwmr0wm7ko">{{ SVGElement("circle"
>important attributes for</span> <span class="author-g-shbl2alwmr0>) }} element. The important attributes for</span> <span class="au
>wm7ko">{{ SVGElement("animate") }} are</span> 'attributeName' whi>thor-g-shbl2alwmr0wm7ko">{{ SVGElement("animate") }} are:</span>
>ch specifies the name of the attribute to animate, 'from' which s 
>pecifies the initial value of the attribute, 'to' which specifies 
> the final value and 'dur' which specifies the duration (you need 
> to write '5s' for 5 seconds). 
nn35    <dl>
36      <dt>
37        <strong>attributeName</strong>
38      </dt>
39      <dd>
40        The name of the attribute to animate.
41      </dd>
42      <dt>
43        from
44      </dt>
45      <dd>
46        The initial value of the attribute.
47      </dd>
48      <dt>
49        to
50      </dt>
51      <dd>
52        The final value.
53      </dd>
54      <dt>
55        dur
56      </dt>
57      <dd>
58        The duration of the animation (for example, write '5s' fo
 >r 5 seconds).
59      </dd>
60    </dl>
n23      If you want to animate more attributes inside the same elemn62      If you want to animate more attributes inside the same elem
>ent, just add more animate elements.>ent, just add more {{ SVGElement("animate") }} elements.
n45      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("n84      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("
>animateTransform") }} element let you animate 'transform' attribu>animateTransform") }} element let you animate <strong>transform</
>tes. This new element is necessary because we are not animating a>strong> attributes. This new element is necessary because we are 
> simple attribute like x which is just a number. Rotation attribu>not animating a simple attribute like <strong>x</strong> which is
>tes look like this : rotation(30 60 100). In the example below, w> just a number. Rotation attributes look like this: <code>rotatio
>e animate the center of the rotation and the angle.<br></span>>n(30 60 100)</code>. In the example below, we animate the center 
 >of the rotation and the angle.<br></span>
n76      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("n115      <span class="author-g-shbl2alwmr0wm7ko">The {{ SVGElement("
>animateMotion") }} element lets you animate an element position a>animateMotion") }} element lets you animate an element position a
>nd rotation according to a path.</span> The path is defined the s>nd rotation according to a path.</span> The path is defined the s
>ame way as in <span class="author-g-shbl2alwmr0wm7ko">{{ SVGEleme>ame way as in <span class="author-g-shbl2alwmr0wm7ko">{{ SVGEleme
>nt("path") }}. You can set the attribute to define if the objet r>nt("path") }}. You can set the attribute to define whether the ob
>otates following the tangent of the path or not.</span>>ject rotates following the tangent of the path.</span>
n82      In this example, a blue circle bounces between the left andn121      In this example, a blue circle bounces between the left and
> right edges of a black box, over and over again, indefinitely. T> right edges of a black box, over and over again, indefinitely. T
>he animation here is handled by the {{ SVGElement("animateMotion">he animation here is handled by the {{ SVGElement("animateMotion"
>) }} element. In this case, we're establishing a path consisting >) }} element. In this case, we're establishing a path consisting 
>of a <strong>M</strong>oveTo command to establish the starting po>of a <strong>M</strong>oveTo command to establish the starting po
>int for the animation, then the <strong>H</strong>orizontal-line >int for the animation, then the <strong>H</strong>orizontal-line 
>command to move the circle 300 pixels to the right, followed by t>command to move the circle 300 pixels to the right, followed by t
>he <strong>Z</strong> command, which closes the path, establishin>he <strong>Z</strong> command, which closes the path, establishin
>g a loop back to the beginning. By setting the value of the <code>g a loop back to the beginning. By setting the value of the <stro
>>repeatCount</code> attribute to "indefinite", we indicate that t>ng>repeatCount</strong> attribute to <code>indefinite</code>, we 
>he animation should loop forever, as long as the SVG image exists>indicate that the animation should loop forever, as long as the S
>.>VG image exists.
n110      Example 2: Curved Motionn149      Example 2: Curved motion
t113      Same example than before with a curved path and following tt152      Same example as before with a curved path and following the
>he direction of the path.> direction of the path.

Back to History