- Tous les cours
- Conditions d'utilisation
- À propos de ces cours
- Contact

# Cours de XML - L'animation dans le SVG

version 1.24, dernière mise à jour le 12 mars 2009.

Chercher dans le cours :

## Table des matières (TdM)

1. I. Introduction

1. II. Animation de base : l'élément animate
   1. Création du graphique de base
      1. Exercice : Création du graphique de base
   2. Un premier effet
      1. Modification d'un attribut
      2. Utilisation de la souris
   3. Un peu plus de contrôle
      1. Attributs from et to
      2. Figer une animation
      3. Répéter une animation
   4. Exercice : Animation de base

1. III. Des animations plus complexes
   1. Changements de couleurs : l'élément animateColor
      1. Exercice : Changements de couleurs
   2. Rotations, mises à l'échelle et translations
      1. Exercice : Transformations
   3. Superpositions d'effets
   4. Exercice : Pour aller plus loin

Retour au menu

## Contenu du cours

### I. Introduction

Nous avons vu précédemment ce qu'il était possible de réaliser en SVG, uniquement de manière statique. On peut cependant ajouter de l'interactivité à un fichier `SVG`, et ce de deux manières :

- soit en utilisant des éléments et attributs propres au format `SVG` -c'est ce que nous allons voir dans la suite de ce cours ;

- soit en utilisant JavaScript et/ou EcmaScript, une sorte de JavaScript normalisé, ainsi qu'un usage intensif du Document Object Model de la page.

Les possibilités d'animation d'un fichier `SVG` à l'aide d'éléments de la spécification sont une composante de base de cette dernière, et sont inspirées de la syntaxe du langage SMIL. Nous allons aborder ces notions de manière progressive, à partir de la réalisation d'un exemple.

### II. Animation de base : l'élément animate

#### 1. Création du graphique de base

Avant d'animer un graphique, encore faut-il l'avoir écrit. Nous allons donc créer un petit cube à l'aide d'une définition.

<?xml version="1.0" encoding="ISO-8859-1"?>
<!DOCTYPE svg SYSTEM "svg10.dtd">
<svg width="500" height="500" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg">
<defs>
<symbol id="cube" stroke="black" stroke-line-join="bevel" stroke-width="2">
<rect width="100" height="100" fill="#ccc" x="1" y="42" />
<polygon points="1,42 42,1 142,1 101,42 1,42" stroke-width="2" fill="#999" />
<polygon points="101,42 142,1 142,101 101,142 101,42" fill="#666" />
</symbol>
</defs>
<use xlink:href="#cube" x="150" y="150" />
</svg>

Ce fichier va nous servir de base.

#### Exercice 1. Création du graphique de base

##### Énoncé

>Retour à la TdM

#### 2. Un premier effet

##### a. Modification d'un attribut

Nous allons commencer par quelque chose de simple en nous contentant de faire monter et descendre notre joli cube. L'attribut servant à gérer cette position verticale est l'attribut `y`. Nous allons donc travailler dessus, en l'animant à l'aide de l'élément... `animate`. Analysons l'exemple ci-dessous...

<use xlink:href="#cube" x="150" y="150">
<animate attributeName="y" dur="2s" values="150; 140; 130; 120; 110; 100; 110; 120; 130; 140; 150" />
</use>

Comme nous pouvons le constater sur l'exemple, le cube monte et descend. L'opération se fait en ajoutant un élément-enfant `animate` à l'élément qu'il faut animer. L'attribut `attributeName` permet de sélectionner l'attribut sur lequel va porter l'animation. N'importe quel attribut peut être modifié, à l'exception toutefois de l'attribut `transform`, dont la syntaxe de modification est légèrement différente.

Il est possible de faire des boucles (utilisation de l'attribut `repeatCount`), de commencer ou finir à des instants déterminés (attributs `begin` ou `end`), mais aussi de synchroniser différentes animations. Nous verrons cela par la suite.

Dans ce cas simple, nous avons utilisé l'attribut `dur`, qui fixe la durée de l'animation. Par défaut, cette dernière commence à la fin du chargement du fichier. Ici, elle dure 2 secondes.

L'attribut `values` donne la liste de... valeurs par lesquelles passe l'attribut spécifié par `attributeName`. Par défaut, un lecteur SVG doit réaliser une interpolation linéaire entre chacune de ces valeurs, mais il est possible de changer ce comportement par défaut.

>Retour à la TdM

##### b. Utilisation de la souris

Il est facile d'insérer un comportement lié à la souris. Par exemple, `begin="mouseover"` déclenche l'animation dès que l'on survole l'élément par la souris. Nous allons plutôt créer un petit bouton, afin de tester ce genre de comportement. Il suffit pour cela de caser dans un coin un rectangle, que l'on identifie par un `id="bouton"`, par exemple, et d'écrire dans notre élément `animate` un `begin="bouton.click"`, pour obtenir l'effet voulu.

>Retour à la TdM

#### 3. Un peu plus de contrôle

##### a. Attributs from et to

Ces deux attributs permettent de ne pas avoir à spécifier une liste de valeurs, dans le cas (comme dans notre exemple) où celles-ci sont régulièrement réparties. Quand on les spécifie, le lecteur SVG réalise une interpolation linéaire entre ces deux valeurs. On peut par exemple ajouter `<animate attributeName="x" dur="3s" from="150" to="100"/>` à l'animation précédente pour modifier également la position horizontale.

>Retour à la TdM

##### b. Figer une animation

Dans l'exemple précédent, l'animation, après s'être exécutée, revenait à son état initial. Ce n'est parfois pas l'effet désiré. Pour figer l'animation dans son état final, on utilise l'attribut `fill`, avec la valeur `freeze` (geler, en anglais). On obtient ainsi le résultat visible sur l'exemple suivant...

>Retour à la TdM

##### c. Répéter une animation

On peut également demander à ce qu'une animation se répète un nombre déterminé de fois, à l'aide de l'attribut `repeatCount`. Cet attribut peut prendre comme valeur un nombre entier, ou bien `indefinite`, qui permet de boucler à l'infini. Il permet d'obtenir une animation bouclée.

>Retour à la TdM

Un autre exemple, plus fouillé, de ce genre d'animation nous montre cette fois-ci une collection de cubes...

#### Exercice 1. Animation de base

##### Énoncé

### III. Des animations plus complexes

#### 1. Changements de couleurs : l'élément animateColor

La couleur nécessite un traitement séparé. Il est réalisé à l'aide de l'élément `animateColor`, mais les attributs de base restent les mêmes. La couleur à modifier doit avoir été fixée lors de l'appel à l'élément, pas lors de la définition (voir le premier exemple pour plus de précisions).

Il est cette fois-ci nécessaire de spécifier un attribut, `attributeType`, dont le rôle est d'indiquer si le format de l'attribut est `XML` ou, comme dans le cas qui nous occupe, `CSS`. Pour passer d'une couleur de remplissage bleue à une couleur verte en trois secondes, on écrira ainsi

<animateColor attributeName="fill" attributeType="CSS" values="#ccc; #000" dur="3s" />

#### Exercice 1. Changements de couleurs

##### Énoncé

>Retour à la TdM

#### 2. Rotations, mises à l'échelle et translations

La syntaxe de l'attribut `transform` ne se prête pas à l'utilisation de l'élément `animate`. Il a été nécessaire de développer un autre élément, `animateTransform`, avec un attribut `attributeName` prenant la valeur `transform`. Cet élément utilise un attribut, `type`, qui lui permet de déterminer de quel type de transformation il va s'agir. Le code suivant permet de décaler dans la direction des x et des y positifs l'élément à animer...

<animateTransform attributeName="transform" attributeType="XML" type="translate" from="0,0" to="100,100" dur="3s" />

Pour une rotation, les règles sont les mêmes que lors de l'utilisation de l'attribut `transform` : si on ne spécifie qu'un seul nombre, la rotation se fait de l'angle indiqué (en degrés, selon les orientations trigonométriques), par rapport à l'origine des coordonnées. Sinon, on peut également spécifier trois nombres ; le premier est l'angle de rotation, les deux autres donnent les coordonnées du centre de rotation.

#### Exercice 1. Transformations

##### Énoncé

>Retour à la TdM

#### 3. Superpositions d'effets

Par défaut, à chaque fois que l'on ajoute une animation, celle-ci écrase celles qui ont été définies avant. Afin d'éviter ce comportement, il faut renseigner l'attribut `additive` avec la valeur `sum` (addition).

>Retour à la TdM

#### Exercice 1. Pour aller plus loin

##### Énoncé

##### Correction

## Historique de ce document

- Le 12 mars 2009, version 1.24. Corrections syntaxiques.
- Le 30 janvier 2006, version 1.23. Corrections de coquilles.
- Le 13 janvier 2006, version 1.22. Corrections de coquilles et syntaxiques.
- Le 12 septembre 2005, version 1.21. Corrections typographiques.
- Le 13 juillet 2005, version 1.20. Réécriture des exemples.
- Le 3 juin 2005, version 1.10. Ajout des exercices.
- Le 16 mars 2005, version 1.00. Création du cours

## Bibliographie

### De l'auteur (G. Chagnon)

- XML, publié par Pearson Education en septembre 2007. Livre de cours et exercices écrit en collaboration avec Florent Nolot (Université de Reims). Consulter la fiche sur Eyrolles. Consulter la fiche sur Amazon.

## Conditions d'utilisation et licence

Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.

Retour au menu