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
Pour animer un objet SVG on dispose de trois solutions :
Dans ce chapitre (et le suivant) je vous montre comment animer des objets SVG via la balise ANIMATE du SMIL.
Le SMIL propose plusieurs balises d'animation : animate, animateColor, animateTansform, animateMotion & set mais la balise animate est de loin la plus importante.
Mais le plus simple pour comprendre le rôle de tous ces attributs est de lire attentivement les exemples qui suivent.
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 5 fois.
Dans le même temps le remplissage est de plus opaque puis de plus en plus transparent et le cycle reprend mais ne se répète lui
aussi que 5 fois.
Observez attentivement l'animation durant une minute.
Actualisez la page pour redémarrer l'animation !
La balise SVG est un élément de type HTML ; on peut colorier le fond via la propriété background.
La balise circle inclut deux fois la balises animate ; elle devient donc une balise double.
Il faut deux balises animate car il faut animer non seulement le rayon mais aussi l'opacité donc
un paramètre de type XML et un paramètre de type CSS.
Elle comprend différentes règles dont :
.ombrage1{filter : drop-shadow(3px 3px 3px gray) }
Donc une classe qui définit un ombrage.
Actualisez la page web pour relancer l'animation !
<circle ... class ="ombrage1" > : on peut désormais appliquer un filtre CSS (défini sous forme d'une classe) à un élément SVG.
L'attribut attributeType a disparu ; il est en effet devenu facultatif avec les nouvelles versions des navigateurs.
Dans chaque baliseanimate j'ai introduit un nouvel attribut : repeatDur (durée globale de l'animation).
Ne confondez pas l'attribut repeatDur (durée de l'animation) avec l'attribut dur (durée d'un cycle).
L'attribut repeatDur est prioritaire sur l'attribut repeatCount.
Donc ici et malgré repeatCount ="indefinite" l'animation s'arrête au bout de 50 secondes.
Remarque: qu'à la fin de l'animation la boule retourne à la position de départ.
Nous verrons plus loin la solution pour "geler" l'objet dans son état final.
Dans les exemples précédents les animations se déclenchaient automatiquement. Dans ce paragraphe je vous montre que l'internaut peut contrôler le début et/ou la fin de l'animation.
Cliquez sur le carré pour lancer l'animation.
La conteneur rect contient deux fois la balise animate car il y a animation du paramètre width et de
du paramètre height pour le même objet SVG.
Remarquez que dans chaque balise animate l'attribut begin a la valeur click !
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é pour stopper son animation.
Le carré reprend alors sa taille initiale ...
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 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 les repeatCount & repeatDur : l'animation se répète à l'infini tant qu'on ne clique pas sur le carré.
Pour démarrer l'animation cliquez sur l'ellipse.
Pour stopper l'animation cliquez dans le canevas mais en dehors de l'ellipse.
L'ellipse garde sa taille finale.
La zone de dessin SVG est identifiée "canevas".
Notez bien pour chaque balise animate les valeurs des attributs begin & end : respectivement "click" & "canevas.click".
Notez aussi l'apparition dans les instructions ANIMATE de l'attribut fill avec la valeur "freeze" pour geler l'objet SVG
dans son état final.
Ne confondez pas l'attribut fill des balises d'animations du SMIL avec l'attribut fill des balises rect, circle, ellipse, polygon, etc. (pour remplir ces formes).
Vous savez désormais animer des formes. Voyons maintenant comment animer du texte. Par exemple, le faire défiler dans une direction.
Attention il faut non seulement du code SVG interne mais aussi une règle de style.
Notez bien la règle de style applicable à une balise TEXT (élément SVG).
CSS : la balise SVG est un élémént HTML à qui on peut appliquer un dégradé linéaire défini selon la spécification CSS.
SVG : l'animation de texte est simple: 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" ("lutin" en français) les personnages d'une animation. Il s'agit souvent de GIF animés.
Dans un document SVG on insère deux gifs animés. Ces deux gifs sont déplacés sur l'axe horizontal.
Il s'agit ici de SVG externe : dans un document SVG nommé "fondeurs.svg".
Le code de ce document SVG:
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 ainsi 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.
Attention ce document SVG contient des liens vers d'autres images, l'affichage dans la page web ne peut se faire qu'avec la
balise object.
J'ai donc écrit dans cette page web le code suivant :
<object type="image/svg+xml" data="fondeurs.svg" class ="grand"></object>