UP PREVIOUS NEXT   Technologies Internet et Education, © TECFA
  2. Animation SVG

2. Animation SVG

2.1 Principe et méthodes d'animation

2 méthodes:

  1. Animation de type "XML/SMIL" avec des balises spéciales
    • Il faut installer un plugin comme Adobe SVG Viewer
    • on peut animer pratiquement chaque attribut avec les éléments d'animation SVG/SMIL (un peu comme en VRML)
    • L'animation SVG/SMIL étend celle de SMIL avec quelques extensions.
    • Il existe des balises SVG spéciales pour construire des animations.
  2. Animation via le DOM de SVG avec un script
    • marche avec Firefox 1.5
    • chaque attribut et "style sheet setting" est accessible selon DOM1 & 2. En plus, il existe un jeu d'interfaces DOM additionnelles.
    • En gros, on écrit un petit programme ECMAScript (JavaScript) qui modifie les attributs d'éléments ou qui ajoute/enlève des éléments/attributs du DOM.

Principe du "time-based"

2.2 Balises pour l'animation "XML/SMIL"

L'élément 'animate':

s'utilise pour animer un seul attribut, ou une seule propriété, au cours du temps.

L'élément 'set':

offre un moyen simple pour le paramétrage de une seule valeur d'attribut pour une durée spécifiée.

L'élément 'animateMotion':

entraîne le déplacement d'un élément le long d'un tracé de mouvement.

L'élément 'animateColor':

spécifie une transformation de couleur au cours du temps.

L'élément 'animateTransform':

anime un attribut de transformation sur un élément cible, permettant de ce fait aux animations de contrôler translation, changement d'échelle, rotation et/ou inclinaison.

Exemple 2-1: Exemple de sensibilisation avec animate

<svg xmlns="http://www.w3.org/2000/svg">
 
 <rect
 x="50" y="50" width="200" height="100"
  style="fill:#CCCCFF;stroke:#000099">
  <animate attributeName="x"
 attributeType="XML" 
           begin="0s" dur="5s" from="50" to="300" fill="freeze"/
>
 </rect>
 <text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
  Hello. Let's show a crawling rectangle ! </text>
</svg>

2.3 Les attributs communs aux balises d'animation

xlink:href = "uri"

<svg width="8cm" height="3cm" xmlns="http://www.w3.org/2000/svg" >

attributeName: "nom"

attributType: "type"

attributeType = "CSS | XML | auto"

Ci-dessous, on anime l'attribut "x" (la position x) d'un rectangle et c'est du type XML (SMIL):

<rect x="300">

<animate attributeName ="x" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="100" />

</rect>

begin : begin-value-list

<animate attributeName="x" attributeType="XML"

begin="10s" dur="9s" fill="freeze" from="300" to="100" />

dur : Clock-value | "media" | "indefinite"

<animate attributeName="x" attributeType="XML"

begin="0s" dur="9s" fill="freeze" from="300" to="100" />

 

 

 

 

 

La définition de la valeur "clock-value" est compliquée:

Voici qqs. exemples qui marchent:

02:30:03    = 2 heures, 30 minutes et 3 secondes
50:00:10.25 = 50 heures, 10 secondes et 250 millisecondes
02:33   = 2 minutes et 33 secondes
00:10.5 = 10.5 secondes = 10 secondes et 500 millisecondes
3.2h    = 3.2 heures = 3 heures et 12 minutes
45min   = 45 minutes
30s     = 30 secondes
5ms     = 5 millisecondes
12.467  = 12 secondes et 467 millisecondes

end : end-value-list

min : Clock-value | "media"

max : Clock-value | "media"

restart : "always" | "whenNotActive" | "never"

repeatCount : numeric value | "indefinite"

repeatDur : Clock-value | "indefinite"

fill : "freeze" | "remove"

2.4 Les attributs pour les valeurs d'animation au cours du temps

calcMode = "discrete | linear | paced | spline"

values = "<liste>"

 

keyTimes = "<liste>"

keySplines = "<liste>"

2.5 Les attributs qui contrôlent la succession des animations

additive = replace | sum

<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum"/>
</rect>
<rect width="20px" ...>
  <animate attributeName="width" from="0px" to="10px" dur="10s"
           additive="sum" accumulate="sum" repeatCount="5"/>
</rect>

accumulate = "none | sum"

Exemple 2-2: Deltas d'une animation

 
<rect x="50" y="50" width="20px" height="20px"
  style="fill:yellow;stroke:black">
  <animate attributeName="width" dur="5s" repeatCount="5" 
           fill="freeze"     
           from="0px" to="20px" 
           additive="sum" accumulate="sum"/>
 </rect>
 
 <text x="55" y="90" style="stroke:#000099;fill:#000099;fontsize:24;">
  Hello. Let's show a growing rectangle ! </text>

2.6 L'élément set

Exemple 2-3: Simple animation avec set et animation

<rect x="50" y="50" width="200" height="100"               style="fill:#CCCCFF;stroke:#000099"
    visibility ="hidden"
 >
    <set
 attributeName="visibility"
 attributeType="XML" 
      begin="4s" dur="5s" to="visible"/>
  </rect>
 
<rect style="fill:yellow;stroke:#000099" x="250" y="50" width="200" height="100" opacity="0" 
>
    <animate attributeName="opacity"
 attributeType="XML" 
      begin="1s" dur="5s" from="0" to="1" fill="freeze"
/>
  </rect>

2.7 AnimateColor

Exemple 2-4: Animation d'une couleur

<svg height="900" width="900">
 
<!-- un gros rectangle qui remplit l'écran -->
<rect style="fill:#000000;
" height="900" width="900" y="0" x="0">
  <animate fill="freeze" dur="5s" begin="0.1s" 
        to="#FFFFFF" from="#000000"
 calMode="linear" attributeName="fill
"/>
</rect>
 
<!-- représentation d'une tige (rectangle haut et fin) -->
<rect style="fill
:#CC9933;stroke:#CC9933" width="20" height="500"
      ry="5" rx="5" y="100" x="400">
   <animate dur="5s" begin="1s" to="#000000" 
            from="#CC9933" calMode="linear" attributeName="fill
"/>
   <animate dur="5s" begin="6s" from="#000000" 
            to="#CC9933" calMode="linear" attributeName="fill
"/>
</rect>

2.8 AnimateTransform

Exemple 2-5: Simple rotation

 
  <title>Simple rotation example</title>
  <desc> Rotation with a grouping node </desc>
  <g>
    <rect x="50" y="50" rx="5" ry="5" width="200" height="100"
	  style="fill:#CCCCFF;stroke:#000099"/>
   <text x="55" y="90"
                 style="stroke:#000099;fill:#000099;fontsize:24;">
	Hello. Let's rotate</text>
    <animateTransform attributeName="transform" type="rotate"
		      values="0 150 100; 360 150 100"
		      begin="0s" dur="5s" />
  </g>
 

2.9 AnimateMotion

Exemple 2-6: Animation d'un mouvement le long d'un tracé

<path d="M-25,-12.5 L25,-12.5 L 0,-87.5 z"
        fill="yellow" stroke="red" stroke-width="7.06"  >
 <!-- Definit l'animation sur le trace de mouvement -->
  <animateMotion dur="6s" repeatCount="indefinite"
                   path="M100,250 C 100,50 400,50 400,250"
 rotate="auto"
 />
</path>

2.10 Animations combinées

Exemple 2-7: Exemple d'une animation combinée


UP PREVIOUS NEXT -- TIE