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 Changements de couleurs : l'élément <animateColor> 1.1 Exercice 1. Changements de couleurs 2 Rotations, mises à l'échelle et translations 2.1 Exercice 1. Transformations 3 Superpositions d'effets 4 Exercice 1. Pour aller plus loin 5 Sources 6 Voir aussi

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é

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>. Il faut renseigner l'attribut attributeName par a 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é

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

Exercice 1. Pour aller plus loin

• Énoncé
• Correction

Sources

Gilles Chagnon

Voir aussi

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