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
Nous allons maintenant réaliser des images SVG animées.
Compte tenu de la future version 2 de SVG et de la version 3 de CSS, l'animation d'objets SVG par le SMIL est une technique
vieillissante qui deviendra obsolète lorsque les navigateurs populaires auront implémenté SVG version 2.
Le CSS remplacera avantageusement le SMIL (mais aussi le JavaScript) lorsque tous les paramètres géométriques des éléments SVG
pourrant être passés en propriétés (une des nouveautés de SVG 2).
En ce début d'année 2023, SVG 2 est en partie implémenté par Chrome uniquement.
Vous pouvez donc survoler rapidement les 5 pages sur l'animation avec SMIL. Par contre lisez attentivement le chapitre sur l'animation d'objets SVG via le CSS ; il vous faudra maitriser les modèles d'animation CSS (les "keyframes" et le raccourci "animation").
Examinons maintenant l'animation d'éléments SVG avec la balise animate du SMIL.
Le rond grossit progressivement pour atteindre un rayon maximum puis diminue pour atteindre un diamètre minimum et le cycle
recommence mais ne se répète que 10 fois.
Dans le même temps il est de plus opaque puis de plus en plus transparent et le cycle reprend mais ne se répète lui aussi de que 10 fois.
Actualisez la page pour redémarrer l'animation !
La balise circle inclut deux fois la balises animate.
La balise animate est le "couteau suisse" de l'animation en SMIL et comprend de nombreux attributs.
Si il n'y a que deux valeurs pour l'attribut values on peut remplacer ce dernier par les attributs from et to.
Concernant la deuxième balise animate vous constatez que la valeur de l'attribut attributType est "CSS". En effet l'opacité de la forme a été passée en propriété CSS (via l'attribut style) et non pas en attribut.
La balise animate comprend d'autres attributs que nous aborderons par la suite.
L'animation est ici déclenchée automatiquement, le cycle dure 10 secondes, se répète un nombre indéfini de fois mais la durée globale de l'animation dure 50 secondes !
La boule se déplace de gauche à droite et de bas en haut durant 10 secondes puis le cycle reprend. Mais la durée totale de l'animation est de 50 seondes !
Actualisez la page pour relancer cette animation.
Vous pouvez constater que CSS est sollicité pour dessiner le décor de l'animation : un billard.
Je rappelle que la balise SVG est un élément HTML (et non pas svg) et que donc vous pouvez appliquer les propriétés border, background, box-shadow
à cet élément au lieu de fill, stroke, ...
Dans la balise animate j'ai introduit ici un nouvel attribut : repeatDur (durée globale de l'animation).
Ne confondez pas l'attribut repeatDur avec l'attribut dur (durée d'un cycle). L'attribut repeatDur est prioritaire sur
l'attribut repeatCount ! Donc ici malgré repeatCount ="indefinite" l'animation va s'arrêter au bout de 50 secondes.
Remarquez qu'après la fin de l'animation la boule retourne à la position de départ. Il aurait été préférable que la boule reste à la position atteinte après deux cycles et demi d'animation. Nous verrons la solution plus tard.
Deux boules ombrées se déplacent selon les deux axes en 10 secondes.
Pour la boule blanche l'animation est perpétuelle mais démarre deux secondes après le chargement de la page.
Quant à la boule rouge, l'animation ne dure que 50 secondes et la boule reste à l'emplacement atteint au bout de cette durée.
On dit qu'il y a "gel" de l'animation.
On définit deux modèles identifiés rouge et blanche.
Notez l'astuce pour créer un effet d'ombre. Chaque objet comprend deux cercles dont un gris (l'ombre).
Il faut bien sur dessiner d'abord l'ombre (cercle gris) puis le rond rouge (ou blanc) afin qu'il soit en premier plan.
Le rond rouge ou blanc est décalé de 4 pixels vers le haut et vers la gauche par rapport au rond gris.
Dans ce genre d'animation les éléments SVG (ici les boules) ne doivent pas sortir du canevas. Les valeurs de l'attribut values
de la balise animate doivent être cohérents avec les valeurs du viewBow du canevas.
Ici le x maximun d'une boule doit être 890 (900 - 10) et le y maxi : 110 (120 - 10).
On clone et on anime chaque modèle avec changement des coordonnées X et Y.
Donc ici la grande nouveauté syntaxique est la balise animate contenue dans la balise use.
Notez l'emploi dans la balise animate de l'attribut fill avec la valeur "freeze" (on parle de "gel de l'animation").
L’attribut fill de animate (ne doit pas être confondu avec l’attribut fill
définissant la couleur de remplissage d’une forme.
Remarque : pour l'animation de la boule blanche je vous communique seulement des bribes de code.
Comme l'animation est perpétuelle (pas de repeatDur et repeatCount à indefinite) l'attribut fill est ici inutile !
Dans les exemples précédents les animations se déclenchent automatiquement. Maintenant je vais vous montrer que le visiteur peut contrôler les animations.
Cliquez sur le carré de couleur orange pour démarrer l'animation de ce dernier !
La conteneur rect contient deux fois la balise animate car il y a animation de l'attribut width et de l'attribut height
pour le même objet SVG.
Remarquez que dans chaque balise animate l'attribut begin a la valeur click !
Il s'agit donc d'un animation déclenchée (par le visiteur) et non pas d'une animation automatique comme dans la page précédente.
L'attribut repeatCount a la valeur indefinite. Donc dès que l'animation est déclenchée elle se répète de façon infinie.
Cliquez sur le carré de couleur verte pour stopper l'animation de celui-ci !
L'animation sur le carré vert est déclenchée automatiquement (lors du chargement de la page) mais le visiteur peut la stopper à tout moment en cliquant sur l'objet car emploi de l'attribut end avec la valeur click.
Nous avons donc introduit ici un nouvel attribut pour la balise animate : l'attribut end qui est prioritaire sur l'attribut repeatCount : l'animation se répète à l'infini tant qu'on ne clique pas le carré.
Notez qu'après avoir cliqué sur le carré vert ce dernier reprend sa taille initiale car je n'ai pas utilisé l'attribut fill ="freeze" (gel de l'animation).
Pour démarrer l'animation cliquez sur le bouton vert légendé "go".
Pour arrêter l'animation, cliquez sur le bouton rouge légendé "stop".
L'animation se répète à l'infini : ellipse est de plus en plus large et de plus opaque puis c'est l'inverse.
L'objet garde la taille et l'opacité atteinte lors de l'arrêt de l'animation.
Attention ici il s'agit d'une image vectorielle SVG animée qui est insérée dans la page via la balise object
Le code du fichier SVG ci-dessous (extraits) :
Il faut dessiner une ellipse et en dessous deux boutons de commande avec texte.
Les boutons de commande sont identifiés "go" et "stop".
La balise ellipse contient donc deux balises animate.
Remarquez la valeur des attributs begin et end dans ces balises : "go.click" "stop.click".
Vous savez désormais animer des formes, passons au texte ! Par exemple, le faire défiler dans une direction.
CSS : la balise SVG est un élémént HTML a qui on peut appliquer un dégradé linéaire CSS.
SVG : l'animation de texte est un jeu d'enfant: le conteneur text contient la balise animate.
L'animation porte sur l'attribut "x" (position horizontale du texte).
L'attribut values a trois valeurs afin que texte se déplace alternativement de gauche à droite puis de droite à gauche.
Notez que les valeurs de l'attribut values peuvent être négatives afin que le texte disparaisse complètement.
On désigne par "sprites" les personnages d'une animation. Il s'agit souvent de GIF animés.
Dans un canevas SVG on insère deux gifs animés. Ces deux gifs sont déplacés sur l'axe horizontal.
Le canevas est d'abord rempli de gris clair via le CSS puis on dessine la neige (rectangle rempli de blanc) et le pâle soleil
d'hiver (un cercle jaune flouté).
On clone le groupe "sapin" plusieurs fois (balise use)
Le décor de l'animation est alors réalisé !
On insère ensuite avec la balise image deux gifs animés.
On déplace ces deux images selon un axe horizontal grâce à la balise animate.
Comme chaque fichier SVG contient des liens vers d'autres images, l'insertion de ces fichiers ne peut se faire qu'avec la balise object.
J'ai donc écrit dans la page web le code suivant :