Animation SVG avec SMIL
=======================

**Attention :** Bien que Chrome 45 déprécie SMIL en faveur des animations CSS et des animations Web, les développeurs Chrome ont depuis suspendu cette décision.

Firefox 4 introduit le support pour les animations SVG en utilisant Synchronized Multimedia Integration Language (SMIL). SMIL permet :

* d'animer les attributs numériques d'un élément (x, y, ...)
* d'animer la transformation des attributs (translation ou rotation)
* d'animer les attributs de couleur
* de créer un mouvement en suivant un tracé donné

Pour ce faire, on utilise un élément SVG tel que `<animate>`. Vous trouverez ci-dessous des exemples illustrant les quatres différents manières de procéder.

Animation pour un attribut
--------------------------

L'exemple suivant anime l'attribut **`cx`** d'un cercle. Pour ce faire, on ajoute un élément `<animate>` dans l'élément `<circle>`. Les attributs importants pour `<animate>` sont :

**`attributeName`**

Le nom de l'attribut à animer.

`from`

La valeur initiale de l'attribut.

`to`

La valeur finale.

`dur`

La durée de l'animation (par exemple, écrire '5s' pour 5 secondes).

Si vous voulez animer plus d'attributs dans le même élément, ajoutez simplement d'autres éléments `<animate>`.


```html
<svg width="300" height="100">
  <title>Attribute Animation with SMIL</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animate
 attributeName="cx"
 from="0"
 to="100"
 dur="5s"
 repeatCount="indefinite" />
  </circle>
</svg>
```

Animer une transformation d'attributs
-------------------------------------

 L'élement `<animateTransform>` permet d'animer la **transformation** d'attributs. Ce nouvel élément est nécéssaire parce que nous n'animons pas un simple attribut tel que **x,** qui est juste un nombre.
 Les attributs pour la rotation sont ainsi : `rotation(theta, x, y)`, où `theta` est l'angle en degrés, `x` et `y` sont les positions absolues.
 Dans l'exemple ci dessous, on anime le centre de rotation et l'angle.


```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with transform</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="50"
 width="15"
 height="34"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateTransform
 attributeName="transform"
 begin="0s"
 dur="20s"
 type="rotate"
 from="0 60 60"
 to="360 100 60"
 repeatCount="indefinite" />
  </rect>
</svg>
```

Animation suivant un tracé (chemin)
-----------------------------------

L'élement `<animateMotion>` permet d'animer la position et la rotation d'éléments en suivant un tracé spécifique. Ce chemin est définit de la même manière que dans `<path>`.

### Exemple 1: Mouvement linéaire

Dans cet exemple, un cercle bleu rebondit indéfiniment entre les bords gauche et droit d'une boîte noir. L'animation est ici gérée par l'élément `<animateMotion>`.

On crée ici un chemin avec les commandes **MoveTo**, pour définir le point de départ de l'animation, **Horizontal-line**, pour déplacer le cercle de 300 pixels vers la droite, et la commande **Z**, pour fermer le chemin — ce qui permet d'établir une boucle qui revient au début. En définissant la valeur de l'attribut **repeatCount** à `indefinite`, on indique que l'animation doit boucler indéfiniment, tant que l'image SVG existe.


```html
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <circle cx="0" cy="50" r="15" fill="blue" stroke="black" stroke-width="1">
    <animateMotion path="M 0 0 H 300 Z" dur="3s" repeatCount="indefinite" />
  </circle>
</svg>
```

### Exemple 2: Mouvement en courbe

Le même exemple que précédemment mais avec une trajectoire courbe.


```html
<svg width="300" height="100">
  <title>SVG SMIL Animate with Path</title>
  <rect x="0" y="0" width="300" height="100" stroke="black" stroke-width="1" />
  <rect
 x="0"
 y="0"
 width="20"
 height="20"
 fill="blue"
 stroke="black"
 stroke-width="1">
    <animateMotion
 path="M 250,80 H 50 Q 30,80 30,50 Q 30,20 50,20 H 250 Q 280,20,280,50 Q 280,80,250,80Z"
 dur="3s"
 repeatCount="indefinite"
 rotate="auto" />
  </rect>
</svg>
```

Voir aussi
----------

* SVG
* SVG Animation Specification
* SMIL Specification