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.
Par ailleurs on peut enchainer les animations grâce à une astuce ...
Certaines animations ont une durée limitée ; pensez à actualiser la page pour éventuellement relancer l'animation.
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 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 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 ...
Attention si vous avez plusieurs canevas SVG dans la même page web, veillez à ce que les identifiants
de vos objets ou animations soient uniques.
Pour le premier canevas identifiez les animations : a1,a1,...
Pour le deuxième canevas 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 a11 est répétée deux fois.
Jusqu'à présent la progression de l'animation est linéaire c'est à dire que la vitesse est constante sur tout le cycle.
Avec l'attribut "keytimes" combiné avec "values" on peut imaginer des phases dans le cycle avec des rythmes différents ;
par exemple une allure lente pour une première phase et une allure rapide pour une deuxième phase.
Cliquez sur le rectangle pour démarrer l'animation.
La largeur d'un rectangle gris passe de 10 à 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 10 à 400px puis 8 secondes pour passer de 400 à 800px donc la vitesse est deux
fois plus grande dans la phase 1 que dans la phase 2.
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 phase 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 compris entre 0 et 1.
Si vous voulez que le cycle ait deux phases il faut trois étapes donc trois valeurs pour ces deux attributs.
Dans l'exemple les valeurs de values sont : "50;400;800"
et les valeurs de keyTimes sont : "0;0.2;1" et la valeur de dur est "10s".
Il y a donc trois étapes pour délimiter deux phases.
La première phase dure (10s*0.2) = 2s ; la deuxième phase dure donc 10s -2s = 8s OU (10s *(1-0.2)).
Jusqu'à présent toute animation déclenchée par clic 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 par défaut la valeur always !
Pour empécher le redemarrage de l'animation par le visiteur il faut intégrer alors dans l'instruction ANIMATE l'Attribut restart
avec la valeur "whenNotActive".
Cet attribut n'a aucune incidence sur une animation automatique.
Cliquer sur l'une des deux boules et observez ...
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.
A partir des valeurs vous devez retrouver les attributs correspondants.
Apparition de l'attribut restart="whenNotActive"
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" .
Pour la deuxième animation (identifiée "a32"), la valeur de begin est : "a31.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".
Donc on crée une répétition à l'infini d'un enchainement d'animations : a31 puis a32 ; puis 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").
repeatDur n'est pas renseigné ; je rappelle qu'il est prioritaire sur repeatCount.