Un article de WikiTuto.

Catégorie:Cours XML XML Concepts de base Historique : de SGML à XML XML:Mise en oeuvre Structure d'un document XML Support par les navigateurs Prise en main d'XML CookTop XML CookTop généralités Interface Exercices Prise en main d'oXygen XML Editor Généralités Interface Fonctionnalités Exercices Déclarations de Type de Document Introduction Types de DTD Déclarations d'éléments Déclarations d'attributs Déclarations d'entités Initiation aux Schéma XML Introduction Les premiers pas Déclarations d'éléments et d'attributs Les types de données Espaces de nom Les dérivations Diverses autres fonctionnalités Mise en forme à l'aide de feuilles de style XSL Présentation Exemples de mises en forme Mise en forme à l'aide de feuilles de style XSL (XSLT) Les expressions de sélection XPath Éléments XSLT Fonctions XPath Fonctions XPath applicables aux nœuds Fonctions XPath applicables aux chaînes de caractèress Fonctions XPath applicables aux nombres Fonctions booléennes Autres fonctions Utilisation du DOM et XSLT dynamique Insertion de code JavaScript dans une page Utilisation du DOM Synchroniser des contenus multimédia avec SMIL Généralités Construction progressive d'un fichier SMIL Conclusion Un format de dessin vectoriel en XML: SVG Introduction SVG de base Éléments graphiques de base Structuration: éléments de groupage et références Transformations Autres fonctionnalités L'animation dans le SVG Introduction Animation de base: l'élément animate Des animations plus complexes Plus loin que les formulaires HTML: XForms Généralités Fonctionnalités des formulaires XForms Dans la pratique Pour aller plus loin... Quelques mots sur les Services Web Généralités Trouver un service Web Accéder à un service Web Récapitulation et inconvénients modifier Tdm XML Source : Gilles Chagnon

Sommaire 1 Création du graphique de base 1.1 Exercice 1. Création du graphique de base 2 Un premier effet 2.1 Modification d'un attribut 2.2 Utilisation de la souris 3 Un peu plus de contrôle 3.1 Attributs from et to 3.2 Figer une animation 3.3 Répéter une animation 4 Exercice 1. Animation de base 5 Sources 6 Voir aussi

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">
  <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é

Un premier effet

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 vertical 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 au 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.

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.

Un peu plus de contrôle

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.

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 suivant...

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.

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é

Sources

Gilles Chagnon

Voir aussi

• Introduction
• Animation de base: l'élément animate
• Des animations plus complexes