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 ! Certains de ces attributs n'ont pas encore été évoqués dans le chapitre précédent.
On peut enchainer les animations.
La progression de l'animation n'est pas forcément linéaire.
Grâce à l'attribut keyTimes les différentes phases n'ont pas forcément la même durée.
Grâce à l'attribut calcMode la progression peut correspondre à une courbe de Bézier cubique.
Une boule se déplace horizontalement puis c'est sa taille qui change.
HTML : un canevas avec un viewBox de 400 par 400 rempli de jaune.
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 2 fois 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".
Actualisez la page pour relancer la séquence !
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 animation est identifiée via un ID.
Remarquez aussi la valeur de l'attribut begin à partir de la deuxième animation.
Attention si vous avez plusieurs canevas SVG dans la même page web, veillez à ce que les ID
de vos objets ou animations soient uniques.
Ainsi la première animation est identifiée a1.
La deuxième animation, identifiée "a2", 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 ...
Pour le premier canevas identifiez les animations : a1,a1,...
Pour le deuxième canevas de la même page identifiez les animations : a11, a12, ...
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 ! Mais la première animation continue ...
la première animation est identifiée a11.
Notez bien la valeur de l'attribut begin dans la deuxième animation : a11.repeat(2) ce qui veut dire lorsque
l'animation identifiée "a11" est répétée deux fois.
Le canevas est initialement vide !
Cliquez dans le canevas pour démarrer les deux animations.
Actualisez la page pour vider le nouveau le canevas.
Le rectange gris s'étend de façon constante alors que pour le rectangle bleu l'extension est rapide au départ et lente dans une deuxième phase.
Il y a deux animations simultanées : l'une sur le rectangle gris et l'autre sur le rectangle bleu.
Les codes sont identiques sauf que la deuxième animation contient l'attribut keyTimes ...
Si vous utilisez uniquement l'attribut values les différents phases de l'animation ont toutes la même durée.
Avec l'attribut keyTimes on précise la durée relative de chaque étape par rapport à la durée du cycle.
L'attribut keyTimes doit comporter autant de valeurs que 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 croissants compris entre 0 et 1.
Si vous voulez que le cycle ait deux phases il faut que les attributs values & keyTimes aient chacun trois valeurs.
Dans l'exemple ci-dessus et pour les deux animations : les valeurs de values sont : "0;400;800" et dur vaut "10s"
Pour la première animation, chaque phase dure 10 /2 = 5 secondes.
Donc le rectangle gris passe de 0 à 400 de large en 5 secondes puis de 400 à 800 toujours en 4 secondes ; il s'agit donc d'une progression
linéaire.
Pour la deuxième animation la première phase dure (10s*0.2) = 2s ; la deuxième phase dure donc 10s - 2s = 8s OU (10s *[1-0.2]).
Grâce à l'attribut keytimes combiné avec l'attribut values on peut obtenir des animations dont la progression
n'est pas linéaire.
Donc le rectangle bleu passe de 0 à 400 de large en 2 secondes puis de 400 à 800 en 8 secondes donc le rythme n'est plus constant ;
accélération rapide dans la deuxième phase.
Avec, par exemple, quatre valeurs pour les attributs values & keyTimes vous pouver obtenir une accélération dans la phase 1,
une interpolation linéaire dans la phase 2 et une décélération dans la phase 3.
Dans le canevas précédent recliquez dans la canevas après avoir lancé les animations, celles-ci redémarrent ...
En effet l'attribut restart a par défaut la valeur always !
Pour empécher cet inconvénient il suffit d'utiliser l'Attribut restart
avec la valeur "whenNotActive".
Attention cet attribut n'a aucune incidence sur une animation automatique.
Dans l'exemple ci-dessous dès qu'une des boules de billard a été lancée l'utilisateur ne relancer l'animation.
Cliquer sur l'une des deux boules et observez ...
La progression n'est pas constante ; la boule est plus lente au retour qu'à l'aller : 4 secondes pour l'aller et 6 secondes pour le retour grâce au "keytimes".
Notez le CSS associé à l'élément SVG pour dessiner un billard.
Remarquez l'astuce pour créer un effet d'ombre : un cercle gris affiché en premier plan et décalé de 4px par rapport au rond rouge.
On anime une courbe de Bézier en modifiant les ordonnées des points d'inflexion.
Chaque animation doit impérativement être identifiée !
Notez la valeur de l'attribut begin pour la première animation (identifiée "a31") : "0s;a32.end" .
Ce qui veut dire que l'animation "a31" va démarrer non seulement au chargement de la page mais aussi à la fin de l'animation "a32".
Pour la deuxième animation (identifiée "a32"), la valeur de begin est : "a31.end".
Donc on crée une répétition à l'infini d'un enchainement d'animations : a31 puis a32 et de nouveau a31 ...
Il y a encore quelques années les interfaces graphiques de SVG (Inkscape, Boxy SVG) ne généraient que du SVG correspondant
à des dessins vectoriels statiques.
Or la version 4 de Boxy SVG introduit un module d'animation qui génére du SMIL.
Ci-dessous document SVG animé réalisé entièrement avec Boxy SVG.
Notez que pour donner un effet 3D le billard est ombré ainsi que la boule rouge.
Cliquez sur la boule pour lancer/relancer l'animation !
La boule fait deux AR complets et un aller simple.
Ensuite j'ai sélectionné le rond et j'ai cliqué sur l'onglet "animation".
J'ai alors demandé une animation sur "centre X " et une autre sur "centre Y".
Observez bien la capture d'écran ci-dessous :
Chaque animation est représentée par un axe ; axe qui précise la durée du cycle.
Si les axes sont l'un en dessous de l'autre cela signfie que les animations sont simultanées ;
si elles sont à la suite : animations successives.
Notez que dans l'exemple il y a pour chaque axe trois étapes (donc deux phases).
L'axe en bleu indique l'animation en édition.
Observez bien la boite de dialogue en bas à droite qui permet de donner une valeur aux attributs
begin, repeatCount, restart, fill, repeatDur pour l'animation en édition.
Dans la partie DEFS on retrouve la définition des deux filtres (ombres portées) qui sont identifiés "drop-shadow-filter-0" et
"drop-shadow-filter-1".
J'ai généré une animation sur l'attribut cx et une autre animation sur l'attribut cy du même objet (le rond).
Chaque animation est déclenchée sur clic (begin ="click").
Une animation en cours ne peut être redémarrée (restart = "whenNotActive").
La boule garde la position qu'elle a atteint à la fin de l'animation (fill ="freeze").
Chaque animation est répétée 2.5 fois (repeatCount ="2.5" ; la valeur de cet attribut peut être un décimal.
Je vous ai déjà montré comment réaliser une progression non linéaire en combinant
les attributs values & keyTimes avec au moins trois valeurs pour ces deux attributs.
Mais il existe une solution plus scientifique : une progression selon une courbe de Bézier cubique.
L'attribut calcMode spécifie le mode d'interpolation pour l'animation.
Le mode par défaut est "linear" mais il existe aussi la valeur "spline" ...
Cliquez sur le carré rouge pour démarrer l'animation.
Le déplacement du carré n'est pas linéaire mais selon une courbe de Bézier cubique
Je tiens à dire que je me suis contenté de recopier dans cette page le code d'un document SVG généré par Boxy SVG.
Dans le cadre de l'interface 'animation' j'ai demandé pour chacune des deux animations simultanée : "accélération et décélération douces".
J'ai aussi demandé pour chaque animation : répétition 5 fois ; redémarrez quand inactif.
Je me suis contenté de copier le code généré par Boxy SVG dans cette page web et de rendre le canevas 'responsive' et borduré ;
j'ai donc rajouté dans l'élement SVG : ... width="80%" style ="border : 1px solid black;" ....
Je n'ai pas eu à déterminer les coordonnées des points d'inflexion de la courbe cubique ; Boxy SVG s'en est chargé !
Le code SVG dans cette page web :
Dans la partie DEFS extrait de la définition du dégradé radial qui est appliquée au carré.
Il y a deux points d'inflexion à la courbe de Bezier cubique donc l'attribut keyTimes est obligatoire avec deux valeurs sinon bug !
Cliquez sur la boule bleu pour démarrer l'animation.
En fonction de ce que vous avez lu, vous devez être capable de créer le code SVG correspondant.
Le canevas est délimité par un rectangle de 600 par 400 vide avec des coins arrondis (rayons H & V de 20) et un trait de bordure
de 3 d'épaisseur.
La boule a un rayon de 20 et est positionnée au départ à 20 20.
La boule bleu fait un AR (4 secondes à l'aller et 6 secondes au retour) puis elle fait le tour du canevas à un rythme constant :
100px par seconde.
Il y a donc deux animations simultanées suivies de 4 animations successives.