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 été encore été évoqués.
Vous verrez dans ce chapitre que l'on peut enchainer des animations et que la progression d'une animation n'est pas forcément linéaire.
Vous découvrirez aussi que Boxy SVG (éditeur WYSIWYG de SVG) est capable désormais de générer du SMIL.
Une boule se déplace horizontalement puis c'est sa taille qui change.
Cliquez sur la boule pour lancer son animation.
Comment enchainer deux animations ?
La première balise ANIMATE est identifiée "anime1".
Cette animation est répétée 2 fois et demi car repeatDur est prioritaire sur repeatCount.
Notez bien la valeur de l'attribut begin de la deuxième balise ANIMATE : "anime1.end" (après l'animation "anime1).
Cliquez dans le canevas pour lancer l'animation !
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.
Pour ce faire, chaque balise ANIMATE doit être identifiée.
Il faut ici identifier le canevas ("canevas") afin qu'un clic sur celui-ci lance le script SMIL begin: canevas.click
Attention si vous avez plusieurs canevas SVG dans la même page web, veillez à ce que les ID
de vos canevas, éléments SVG soient uniques.
Identifiez par exemple, le premier canevas "canevas1", le deuxième "canevas2", etc.
Identifiez par exemple, les animations du premier canevas : a1,a1,...
Identifiez par exemple, les animations du deuxième canevas : 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 ! Quant à la première animation elle continue à l'infini ...
Cliquez dans le canevas pour lancer l'animation.
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. Donc la deuxième animation peut démarrer alors que la première se poursuit.
Le canevas est initialement vide !
Cliquez dans le canevas pour démarrer l'animation.
Recliquez dans le canevas pour relancer à chaque fois l'animation.
Le rectange gris s'agrandit 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.
Dans la deuxième animation apparition de 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.
Par contre pour l'animation du rectangle 'navy', la première phase dure (10s*0.2) = 2 secondes ;
la deuxième phase dure 8 secondes (10s *[1-0.2]).
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.
Dans l'exemple 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'utilser 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 boules de billard a été lancée l'utilisateur ne peut plus relancer l'animation.
Cliquer sur l'une des deux boules, tentez de relancer l'animation ...
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 à l'attribut "keytimes".
Notez aussi l'apparition de l'attribut restart ="whenNotActive".
.ombrage1{filter : drop-shadow(3px 3px 3px black) }
Notez le CSS associé à la balise SVG pour "dessiner" un billard.
Notez que je définis un modèle de rond rouge ombré (identifié "boule") que je clone deux fois.
Ci-dessous je vous montre comment animer des courbes de Bézier.
path{fill : none ; stroke-width : 2 ; stroke : red ;}
Rappel : on ne peut pas appliquer les propriétés background & border à un objet SVG (mais fill & stroke).
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" démarre 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 éditeurs WYSIWYG de SVG (Inkscape, Boxy SVG) ne généraient que du SVG correspondant à des dessins vectoriels statiques. Désormais 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 cercle rouge 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 .
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"