Traduction
Dessiner avec SVG - sommaire
Dessiner avec SVG - recherche
L'auteur : Patrick Darcheville
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
Vous pouvez me contacter via Facebook pour questions & suggestions :
Page Facebook relative à mon site
La balise ANIMATE est riche en attributs possibles.
Certains de ces attributs n'ont pas encore été évoqués.
Par ailleurs on peut enchainer des animations à condition de donner certaines valeurs à l'attribut "begin".
Une boule se déplace horizontalement puis c'est sa taille qui change.
La boule rouge se déplace de gauche à droite puis de droite à gauche; ce cycle de 8 secondes est répété durant 18 secondes
(donc 2fois et quart) car emploi de l'attribut repeatDur qui est prioritaire sur repeatCount !
Puis c'est la deuxième animation qui démarre et qui concerne l'attribut "r".
Il y a quatre animations. Chaque animation consiste à dessiner progressivement (sur 5 secondes) un rectangle de 150 pixels de large et
de 50 pixels de haut. Chaque animation n'est répétée qu'une fois ! En effet l'attribut repeatCount est absent !
Les animations s'enchaînent. La deuxième démarre lorsque la première est terminée.
La troisième s'enclenche dès que la deuxième est achevée et ainsi de suite.
Notez que dans chaque balise animate on utilise l'attribut id.
Remarquez aussi la valeur de l'attribut begin à partir de la deuxième animation.
Ainsi la première animation est identifiée a1.
La deuxième animation est identifiée a2 et commence lorsque la première est terminée : begin="a1.end"
La troisième animation commence lorsque la deuxième est terminée : begin="a2.end"
Et ainsi de suite ...
La deuxième animation (celle portant sur le rond) démarre seulement lorsque la première animation (celle portant sur le carré) a été exécutée deux fois !
la première animation est identifiée r1.
Notez bien la valeur de l'attribut begin dans la deuxième animation : r1.repeat(2) ce qui veut dire lorsque l'animation
r1 a connu deux cycles, peut démarrer la suivante.
Jusqu'à présent la progression de l'animation est constante, linéaire.
Avec l'attribut "keytimes" combiné avec "values" on peut imaginer un rythme non constant.
Cliquez sur le rectangle pour démarrer l'animation.
N'hésitez pas à cliquer de nouveau sur le rectangle durant l'animation pour observer que l'animation reprend alors au début.
La largeur d'un rectangle gris passe de 50 à 800 pixels en 10 secondes. Mais la variation n'est plus linéaire (ou constante) par rapport
au temps.
Il faut 2 secondes pour passer de 50 à 400 pixels puis 8 secondes pour passer de 400 à 800 pixels de large.
Vous connaissez déjà l'attribut values. La nouveauté est ici l'attribut keyTimes.
Si vous utilisez uniquement l'attribut values les différents phases de l'animation ont toutes la même durée.
Par exemple si la durée totale de l'animation est de 12 secondes et qu'il y a trois phases alors chaque phase dure 4 secondes (le tiers de 12).
Avec l'attribut keyTimes on précise la durée relative de chaque phase par rapport à la durée totale (valeur de l'attribut dur).
L'attribut keyTimes doit comporter autant de valeurs que l'attribut values. La première valeur de cet attribut
doit être 0 et la dernière 1. Entre ces deux valeurs indiquez des nombres décimaux compris entre 0 et 1.
Dans l'exemple les valeurs de values sont : "100;150;200"
et les valeurs de keyTimes sont : "0;0.2;1"
et la valeur de dur est "10s"
Donc la première phase dure (10 *0.2) = 2 secondes.
la phase 2 dure (10 *(1-0.2)) = 8 secondes.
Jusqu'à présent toute animation déclenchée par l'utilisateur peut être stoppée puis redémarrée par un nouveau clic sur l'objet animé.
En effet par défaut l'attribut restart a la valeur always !
Dans l'exemple ci-dessous dès que la boule de billard a été lancée l'utilisateur ne peut pas la suspendre.
Cliquer sur l'une des deux boules et observez ...
A partir des valeurs vous devez retrouver les attributs correspondants.
Pour dessiner le billard j'ai utilisé des propriétés CSS au niveau de la balise SVG dont "box-shadow".
On crée un modèle de boule rouge avec ombrage (couleur "gray").
On clone deux fois ce modèle et on anime ces copies.
Ces animations ne peuvent pas être suspendues. En effet l'attribut restart à la valeur "whenNotActive".
Ces animations ne sont pas linéaires ; la boule est plus lente au retour qu'à l'aller : 2 secondes pour l'aller et 3 secondes pour le retour
grâce à l'utilisation de l'attribut keytimes.
Ce qui correspond à la réalité ; une boule est plus lente en fin de course qu'au début.
On anime une courbe de Bézier cubique en modifiant les ordonnées des points d'inflexion.
Notez bien la valeur de l'attribut begin pour la première animation : "0s;a4.end" . Ce qui veut dire que cette animation va démarrer non seulement au chargement de la page mais aussi à la fin de l'animation "a4". Donc on crée un cycle : a3 au chargement puis a4 puis de nouveau a3 lorsque a4 est terminé ; donc un cycle est créé.