L'animation

Sources :

http://www.w3.org/2002/Talks/0328-Amsterdam-IH/directoryslide.svgz

http://www.kevlindev.com/tutorials/javascript/inheritance/index.htm

http://www.yoyodesign.org/doc/w3c/svg1/animate.html

Livre SVG essential.O'Reilly

Introduction culture générale animation...

Les éléments d'animation SVG ont en été développés en collaboration avec le Groupe de Travail Multimédias Synchronisés du W3C (SYMM),
les développeurs de la spécification du Langage d'Intégration Multimédia Synchronisé (SMIL) version 1.0 [SMIL1].
Un fichier SMIL (The Synchronous Multimedia Integration Language) peut contenir du texte, des images fixes et en mouvement, des animations, ainsi que du son. Le code décrit quels éléments multimédia sont présents dans le document, où ils sont situés, à quel moment ils apparaissent et combien de temps ils durent.
(Les formats de fichiers acceptés dans SMIL sont les suivants : .swf, .rm, .wav, .aif, .mov, .mp3, .gif, .jpg, .rt, .rm, .avi, .mov, .asf, .viv, .mpeg.)


Le Groupe de Travail SYMM, en collaboration avec le Groupe de Travail SVG, a édité la spécification SMIL Animation [SMILANIM] http://www.w3.org/TR/smil20/animation.html#animationNS-Introduction, qui représente un jeu de fonctions d'animation XML d'usage général.
SVG incorpore les fonctions d'animation définies dans la spécification SMIL Animation et fournit des développements propres à SVG.

Un language d'animation doit permette de spécifier quant commence l'animation d'un élément, quand cette animation s'arrête, si cette animation doit se répéter et combien de fois. Et biensûr, ll doit permettre de décrire ce qui se passe durant l'animation.

Voilà un premier exemple:

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"

"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">

<svg width="250" height="100" viewBox="0 0 250 100">

<title>Simple Animation</title>

<rect x="10" y="10" width="200" height="20" style="stroke: black; fill: none;">

<animate

attributeName="width"

attributeType="XML"

from="200" to="20"

begin="0s" dur="5s"

repeatCount="indefinite"

fill="freeze" />

</rect>

</svg>

SVG gère les quatre éléments d'animation suivants, définis dans la spécification SMIL Animation :

'animate' permet aux attributs et aux propriétés scalaires de recevoir différentes valeurs au cours du temps.
'set'

un raccourci pratique pour l'élément 'animate', utile lors de l'assignation de valeurs d'animation à des attributs et propriétés non-numériques, telle que la propriété 'visibility'
'animateMotion' déplace un élément le long d'un tracé de mouvement
'animateColor' modifie la valeur de couleur des attributs et des propriétés particuliers au cours du temps

En supplément, SVG comprend les extensions à SMIL Animation compatibles suivantes :

'animateTransform' modifie l'un des attributs de transformation de SVG au cours du temps, tel que l'attribut transform
l'attribut path SVG autorise la spécification de toute fonction, issue de la syntaxe des données de tracé de SVG, dans l'attribut path d'un élément 'animateMotion' (SMIL Animation ne permet qu'un sous-ensemble de la syntaxe des données de tracé de SVG dans un attribut path)
'mpath' element SVG ajoute un attribut keyPoints à l'élément 'animateMotion' pour offrir un contrôle précis des animations d'un tracé de mouvement
l'attribut keyPoints SVG ajoute un attribut keyPoints à l'élément 'animateMotion' pour offrir un contrôle précis des animations d'un tracé de mouvement
l'attribut rotate SVG ajoute un attribut rotate à l'élément 'animateMotion' pour le contrôle automatique de la rotation d'un objet, de façon à ce que son axe-x se dirige dans la même direction (ou dans la direction opposée) que le vecteur tangent directionnel du tracé de mouvement

'animate'

L'exemple ci-dessus utilisait la balise animate :

<rect x="10" y="10" width="200" height="20" style="stroke: black; fill: none;">
<animate

attributeName="width"

attributeType="XML"

from="200" to="20"

begin="0s" dur="5s"

repeatCount="indefinite"

fill="freeze" />

</rect>

Un autre exemple:

<svg width="300" height="250" viewBox="0 0 300 250">

<title>Multiple Animations on a Single Object</title>

<rect x="10" y="10" width="20" height="20"

style="stroke: black; fill: green; style: fill-opacity: 0.25;">

<animate attributeName="width" attributeType="XML"
from="20" to="250" begin="0s" dur="8s" fill="freeze" repeatCount="indefinite" />

<animate attributeName="height" attributeType="XML"
from="20" to="200" begin="0s" dur="8s" fill="freeze" repeatCount="indefinite"/>

<animate attributeName="fill-opacity" attributeType="CSS"
from="0.25" to="1" begin="0s" dur="3s" fill="freeze" repeatCount="indefinite"/>

<animate attributeName="fill-opacity" attributeType="CSS"
from="1" to="0.25" begin="3s" dur="3s" fill="freeze" repeatCount="indefinite"/>

</rect>

</svg>

'set'

<svg width="300" height="200" viewBox="0 0 300 200">

<title>Example of set element</title>

<circle cx="60" cy="60" r="30" style="fill: #ff9; stroke: gray;">

<animate id="c1" attributeName="r" attributeType="XML"
begin="0s" dur="4s" from="30" to="0" fill="freeze"/>

</circle>

<text text-anchor="middle" x="60" y="60" style="visibility: hidden;">

<set attributeName="visibility" attributeType="CSS"
to="visible" begin="4.5s" dur="1s" fill="freeze"/>
All gone!
</text>

</svg>

Nb: ici pas besoin de "from"

'animateMotion'

L'attribut path...

<svg width="300" height="200" viewBox="0 0 300 200">

<title>Animation Along a Complex Path</title>

<!-- show the path along which the triangle will move -->

<path d="M50,125 C 100,25 150,225, 200, 125"

style="fill: none; stroke: blue;"/>

<!-- Triangle to be moved along the motion path.

It is defined with an upright orientation with the base of the triangle centered horizontally just above the origin. -->

<path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: red;">

<animateMotion

path="M50,125 C 100,25 150,225, 200, 125"

dur="6s" fill="freeze" repeatCount="indefinite"/>

</path>

</svg>

L'attribut rotate et l'élément <mpath>...

<svg width="300" height="200" viewBox="0 0 300 200">

<title>Motion Along a Complex Path Using mpath</title>

<path id="cubicCurve" d="M50,125 C 100,25 150,225, 200, 125"

style="fill: none; stroke: blue;"/>

<path d="M-10,-3 L10,-3 L0,-25z" style="fill: yellow; stroke: red;" >

<animateMotion dur="6s" rotate="auto" fill="freeze" repeatCount="indefinite">

<mpath xlink:href="#cubicCurve"/>

</animateMotion>

</path>

</svg>

'animateColor'

<svg width="300" height="200" viewBox="0 0 300 200">

<title>Example of animateColor</title>

<circle cx="60" cy="60" r="30"

style="fill: #ff9; stroke: gray; stroke-width:10;">

<animateColor attributeName="fill"

begin="2s" dur="4s" from="#ff9" to="red" fill="freeze" repeatCount="indefinite"/>

<animateColor attributeName="stroke"

begin="2s" dur="4s" from="gray" to="blue" fill="freeze" repeatCount="indefinite"/>

</circle>

</svg>

animateTransform

<svg width="300" height="200" viewBox="0 0 300 200">

<title>Example of Multiple animateTransform elements</title>

<g transform="translate(120,60)">

<rect x="-10" y="-10" width="20" height="20"

style="fill: #ff9; stroke: black;">

<animateTransform attributeName="transform" attributeType="XML"

type="scale" from="1" to="4 2"

additive="sum" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite"/>

<animateTransform attributeName="transform" attributeType="XML"

type="rotate" from="0" to="45"

additive="sum" begin="0s" dur="4s" fill="freeze" repeatCount="indefinite"/>

</rect>

</g>

</svg>

noter: additive="sum"...pour que les transformations s'additionnent.

Comment se réalise l'animation dans le temps ?

Ou encore : quels sont les attributs qui définissent les valeur d'animation au cours du temps ?

http://www.yoyodesign.org/doc/w3c/svg1/animate.html#ValueAttributes

http://www.w3.org/2002/Talks/0328-Amsterdam-IH/SVGAnimationHowslide.svgz

Comment synchroniser des animations ?

Voir :

http://www.w3.org/2002/Talks/0328-Amsterdam-IH/syncslide.svgz

Exemple:

<svg width="250" height="200" viewBox="0 0 250 200">

<title>Synchronization of Animations</title>

<circle cx="60" cy="60" r="30" style="fill: #f9f; stroke: gray;">

<animate id="c1" attributeName="r" attributeType="XML"

begin="0s" dur="4s" from="30" to="10" fill="freeze" repeatCount="indefinite"/>

</circle>

<circle cx="120" cy="60" r="10" style="fill: #9f9; stroke: gray;">

<animate attributeName="r" attributeType="XML"

begin="c1.end" dur="4s" from="10" to="30" fill="freeze" repeatCount="indefinite"/>

</circle>

</svg>