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 animer certains objets d'un canevas.
L'objet animé peut être une forme simple ou un groupe de formes ou un chemin ou une image incorporée dans le canevas.
Le SMIL propose plusieurs éléments d'animation : animate, animateColor, animateTansform, animateMotion & set mais
la balise animate est de loin la plus importante.
Cet élément peut comprendre de nombreux attributs que nous allons aborder dans ce chapitre.
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 3 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 3 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 donc remplir le canevas via la propriété background.
La balise circle inclut deux fois la balises animate ; elle devient donc une balise double.
Si il n'y a que deux valeurs pour l'attribut values on peut remplacer ce dernier par les attributs from & to.
L'attribut attributType est désormais facultatif. Malgré son absence dans le code, l'animation fonctionne sur les versions récentes des navigateurs populaires (chrome, firefox).
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 !
Actualisez la page pour relancer cette animation.
Observez la règle de style dans la balise SVG début qui dessine un beau décor.
Dans la balise animate j'ai introduit ici 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 malgré repeatCount ="indefinite" l'animation va s'arrêter au bout de 50 secondes.
Donc ici, j'aurais pu n'utiliser que repeatCount="5".
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.
Cette astuce m'évite de devoir définir et appliquer un filtre "ombre portée".
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érentes avec les valeurs du viewBow.
Ici le X maximun d'une boule doit être 890 (900 - 10) et le Y maxi doit être : 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 à "freeze" signifie qu'à la fin de l'animation l'objet va garder l'aspect qu'il a atteint.
Si cet attribut est absent, l'objet reprend l'aspect initial.
L'attribut fill = "freeze" n'a de sens que pour une animation à durée limitée.
Dans les exemples précédents les animations se déclenchaient automatiquement. Désormais je vais vous montrer que le visiteur peut contrôler le début ou la fin de l'animation.
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.
J'ai du insérer le document SVG avec l'élément HTML OBJECT ...
Il s'agit d'un document SVG qui j'incorpore dans cette page web.
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 des formes. Voyons maintenant comment animer des formes. 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 :
<object type="image/svg+xml" data="fondeurs.svg" class ="grand"></object>