| Projets |
255 Visiteurs
3168 Projets
|
|
 |
 |
 |
 |
|
|
| 2006 - Mémoire de fin d'étude |
  Premiers pas en SVG
[20 mn de lecture - paru le 12/8/2006 12:17:26 AM - Public : Débutant]
|
 
|
Auteur
3 Les animations
Jusqu'à présent nous n'avons produit que des images statiques, une fois
construites et affichées elles ne bougent pas. Dans ce chapitre nous
allons examiner en détail comment faire bouger des images.
L'animation, spécifie des mouvements controlés par
l'auteur du code SVG.
Il serait dommage de cacher le message contenu dans le
graphique sous une avalanche d'animations qui détournent l'attention de
la personne qui visualise le graphique.
Ce chapitre met l'accent sur l'animation c'est pourquoi la plupart des
exemples sont presque totalement dénués de contenu intéressant. Nous
essayerons néanmoins d'éviter les animations superflues le plus
possible.
3.1 Concepts de baseLes capacités d'animation de SVG sont
basées sur une spécification du World Wide Web Consortium, Synchronized
Multimedia Integration Language Level 2 (SMIL 2). La spécification de
SMIL2 se trouve à l'adresse suivante: http://www.w3.org/TR/smil20/.
Avec ce système on spécifie les valeurs de début et de fin de
l'attribut, de la couleur, du mouvement ou de la transformation qu'on
souhaite animer, le moment où l'animation doit commencer et la durée de
cette animation. L'exemple 1 montre le code SVG correspondant à une
animation simple.
Les valeurs de début et de fin de l'attribut. Dans cet exemple la valeur de début est 200 et la valeur de fin est 20.
La date de début et la durée de l'animation. Dans cet exemple on mesure
le temps en secondes grâce à la lettre s après les nombres.
Après l'animation on fige l'attribut à sa valeur de fin. Si on enlevait
cette ligne l'attribut retournerait à sa valeur initiale de 200 à la
fin de l'animation. L'attribut fill est un attribut SMIL qui décrit
comment agir à la fin de l'animation et il ne doit pas être confondu
avec l'attribut -fill de SVG qui donne le mode de remplissage d'un
objet.
Passons maintenant à un exemple plus ambitieux. Dans l'exemple 2, nous
allons faire grossir un carré d'une taille initiale de 20x20
pixels à une taille de 250x200 pixels sur une durée de 8 secondes.
Pendant les trois premières secondes l'opacité du carré croît puis elle
décroît pendant les 3 secondes suivantes. Notez que fill-opacity est
spécifiée avec attributeType="CSS" car elle fait partie du style.
Notre dernier exemple, l'exemple 3 anime un carré et un cercle. Le
carré grossit depuis une taille initiale de 20x20 pixels à une taille
de 120x120 pixels sur une durée de huit secondes. Deux secondes après
le début de l'animation le rayon du cercle commence à grossir de sa
taille initiale de 20 pixels jusqu'à une taille de 50 pixels sur une
durée de quatre secondes. La figure 1 montre quatre copies d'écran
prises à des moments différents de l'animation: zéro seconde quand
l'animation commence, deux secondes quand le cercle commence à grossir,
six secondes quand le cercle arrête de grossir et enfin huit secondes
quand l'animation est terminée.
figure 1
3.2 Mesure du temps
L'horloge interne qui gère l'animation commence à tourner quand le
chargement du fichier est terminé et elle s'arrête quand l'utilisateur
quitte la page. On peut donner un début ou une durée pour un segment
particulier d'animation avec une valeur numérique de trois façons
différentes:
• Un instant complet absolu en heures, minutes et secondes (1:20:23).
• Un instant partiel en minutes et secondes (2:15).
• Une valeur de temps suivie par une « métrique »
parmi h (heures), min (minutes), s (secondes) ou ms (millisecondes).
Par exemple dur="3.5s" begin="1min". On ne doit pas mettre d'espace
entre la valeur et la métrique.
On peut aussi lier le début d'une animation au début ou à la fin d'une
autre animation. L'exemple 4 montre deux cercles, le deuxième commence
à s'agrandir dès que le premier a fini de rétrécir. La figure 2 montre
les étapes importantes de l'animation.
Figure 2
Il est également possible d'ajouter un décalage à cette
synchronisation. Pour commencer une animation deux secondes après la
fin d'une autre il faut utiliser une construction de la forme
begin="autreAnim.end+2s" (on peut ajouter des espaces autour du signe
+). Le décalage doit être positif car utiliser begin="autreAnim.
end-2s" demanderait à l'ordinateur de se placer dans le futur ce qui
n'est pas possible. Dans l'exemple 5 le deuxième cercle commence à
grossir une seconde 25 après que le premier ait commencé à diminuer.
Maintenant que l'on sait synchroniser des animations on peut introduire
l'attribut end qui définit la fin de l'animation. Ca ne remplace pas
l'attribut dur ! L'animation suivante commence six secondes après le
chargement de la page et dure au moins 12 secondes ou jusqu'à ce que
l'animation autreAnim se termine.
Il est possible, bien sûr, de donner un nombre comme valeur de
l'attribut end. C'est utile pour stopper une animation en cours pour
vérifier que tout se passe bien. L'animation suivante commence à
6 secondes et devrait durer au moins 12 secondes mais est interrompue
après 9 secondes.
3.3 Répétition d'une animation
Les animations que nous avons produites jusqu'à présent ont lieu une
seule fois car l'attribut fill est positionné à freeze de façon à figer
le dernier état de l'animation. Si on veut que l'objet revienne à son
état initial on positionne cet attribut à remove (ou on ne le spécifie
pas car c'est sa valeur par défaut).
Deux autres attributs permettent de répéter une animation. Le premier,
repeatCount est un entier qui donne le nombre de répétitions d'une
animation. Le deuxième, repeatDur donne la durée d'une répétition. Si
on veut que l'animation dure jusqu'à ce que l'utilisateur quitte la
page on positionne repeatCount ou repeatDur à indefinite. L'animation
de l'exemple 8 montre deux cercles. Le cercle du haut se déplace de
gauche à droite deux fois de suite de cinq secondes chacune. Le second
cercle se déplace droite à gauche sur une durée de 8 secondes.
Exactement comme on peut synchroniser une animation avec le début ou la
fin d'une autre animation, on peut lier le début d'une animation avec
le début d'une répétition particulière d'une autre animation. On donne
un nom à l'animation avec l'attribut id puis on positionne l'attribut
begin de la deuxième animation à id.repeat(nombre), dans lequel nombre
est un nombre partant de 0 pour indiquer la première repétition. Dans
l'exemple 9 le cercle du haut se déplace de gauche à droite trois fois,
chaque trajet durant cinq secondes. Le cercle du bas se déplace de
droite à gauche une seule fois et son mouvement ne commence qu'au
milieu de la deuxième répétion de la première animation grâce à
l'utilisation d'un décalage.
3.4 L'élément set
Toutes ces animations font varier des valeurs numériques au cours du
temps. On peut aussi vouloir utiliser un attribut non numérique ou une
propriété de style. Par exemple on peut vouloir faire apparaître un
texte qui n'était pas visible jusqu'à présent, dans ce cas les
attributs from et to n'ont pas de sens. L'élément permet
d'obtenir cet effet en n'ayant à spécifier que l'attribut à modifier
avec to et l'information de durée souhaitée. L'exemple 10 réduit un
cercle jusqu'à une taille nulle puis fait apparaître un texte une
demi-seconde après que le cercle ait disparu.
|
|
|
|
|
|
|
| Articles de la même catégorie |
|
|
|
|
|
|
|
| SUPINFO Training Center peut vous proposer une formation ... |
|
|
|
|
|
|
|
|
100 Visites
Mickael OHAYON
[10 mn de lecture - paru le 11/17/2006 6:40:45 PM - Public : Débutant]
[10 mn de lecture - paru le 11/17/2006 1:06:00 PM - Public : Débutant]