Accueil

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

Animations SVG avec Snap : les différentes méthodes

Dans ce nouveau chapitre, je vais vous montrer qu'il existe d'autres événements que click, mouseover, mouseout.
Je vais aussi vous présenter les modèles d'animation avec la méthode Snap.animation()
Je vais aussi vous présenter la méthode Snap.set().

Exemple 1 : des ronds qui s'animent

Le rendu

Pour animer un rond il suffit de le cliquer.
Actualisez la page pour repositionner les ronds.

Les ronds deviennent entièrement opaques, se déplacent vers la droite et grandissent. Puis un message apparait dans une boite de dialogue.

Le script

En plus du script il y a une instruction HTML pour créer le canevas responsive.

On définit un modèle d'animation dans la variable anim_modele) avec la méthode Snap.animation().
Le modèle d'animation "anim_modele" consiste en une opacité totale et une transformation : translation et doublement de taille.
Ici j'ai rajouté un troisième argument à la méthode : une fonction de rappel qui consiste en l'affichage d'un message.
Ensuit on utilise ce modèle d'animation pour définir une fonction d'animation générique puisque l'élément est désigné par le mot "this".
On applique sur clic cette fonction d'animation générique aux deux cercles.

Exemple 2 : des images qui s'animent

Le rendu

Survolez l'une des images ; elle s'agrandit et devient opaque !
L'image reprend sa transparence et sa taille initiale à la fin du survol.

Le script

ViewBox de 900 par 600.

On insère deux images matricielles dans le canevas via la méthode image(). Ce qui est logique puisqu'en SVG traditionnel la balise d'insertion d'images existantes est image.
On définit ensuite deux modèles d'animation : action1 & action2
On définit deux fonctions génériques (élément = "this") à partir des deux modèles d'animation : faction1 & faction2
Emploi de la méthode hover() qui remplace avantageusement les méthodes mouseover & mouseout
Syntaxe de cette méthode : élément.hover(fonction1, fonction2).
"fonction1" est déclenchée lors du survol ; "fonction2" est déclenchée dès que le pointeur quitte l'élément.

Les utilisateurs de jQuery ne seront pas surpris par cet événement ...

Utiliser des fichiers vectoriels existants

Vous pouvez insérer des images existantes dans le canevas via le CSS (propriété background) ou via la méthode image de Snap et ces images peuvent être des images vectorielles ...
Dans l'exemple ci-dessous j'insère deux fichers SVG produits avec Inkscape.
L'une (piste.svg) doit occuper tout le canevas et est donc insérée via la propriété CSS background et l'autre (avion.svg) est un "sprite" et doit être insérée via la méthode image() de la libraire snap svg.

Le code correspondant

HTML & CSS :

Le script

Le viewbox dans l'instruction HTML définit un repère de 900 par 600.

Le script ne présente aucune difficulté.
L'image "avion.svg" ne pèse que 1 KO suite à son optimisation avec SVG Editor.
J'en profite pour faire une "piqûre de rappel" sur les filtres. Il manque en effet un soleil dans le décor ; donc je rajoute un rond jaune flouté. Je rajoute aussi une ombre à l'avion.

Le modèle d'animation est référencé par la variable anim_modele2 car dans un script précédent (mais dans la même page) il y avait déjà emploi de la variable anim_modele ...

Le rendu

Cliquez sur le jet pour démarrer l'animation.
Actualisez la page pour repositionner l'avion.

Du bon usage de "this"

Exemple

Cliquez sur l'un des carrés ; il disparait à la fin de l'animation.

Actualisez la page pour afficher de nouveau les carrés.

Le script

Le viewbox dans l'instruction HTML définit un repère de 900 par 600.

Je vous montre ici que le troisième argument de Snap.animation() peut être une fonction nommée et que dans cette fonction nommée (ici "fsuite") on peut utiliser le mot "this". Il s'agit donc d'une fonction générique (porte sur l'élément courant) !

La méthode Snap.set()

Cette méthode permet de définir très rapidement un ensemble de formes.
Elle va de pair avec la méthode animate() mais avec cette fois une syntaxe particulière ...
"Set" veut dire ensemble. On peut définir un ensemble de formes

Exemple 1

Cliquez sur le premier rond pour démarrer l'animation.
Actualisez la page pour revenir à la situation initiale.

Les ronds grandissent, deviennent opaques et changent de couleur sauf le quatrième qui n'est pas concerné par l'animation

Le script

Le viewbox dans l'instruction HTML définit un repère de 900 par 600.

Commentaire

Le script comprend désormais une fonction "fzone6" et l'appel de cette fonction. Ainsi nous sommes certains que les variables définies seront locales. Donc le risque d'ambiguité avec d'autres variables définies par d'autres scripts de la même page est levé.

Le gros avantage de la méthode Snap.set() est qu'elle permet de définir et styler de nombreux éléments sans devoir les nommer.

"Animation1" s'applique au premier élément de "ensemble" ; "Animation2" s'applique au deuxième élément ; "animation3" s'applique au troisième élément.
Il n'y a que trois animations alors que l'ensemble "serie" comprend quatre éléments. Donc le dernier rond n'est pas animé.

Autre exemple sur Snap.set() et animate() avec une syntaxe particulière

Rien n'interdit de combiner dans un même script deux méthodes puissantes : Snap.set() et Snap.animation()

Cliquez sur le premier rond pour démarrer l'animation.

Les quatre ronds se déplacent vers la droite et le bas tout en passant au violet et en doublant de taille.

Le script

Commentaire

Je crée un ensemble d'éléments nommé "serie2".
Je définis un modèle d'animation dans la variable anime_modele qui prévoit : opacité totale, transformation, passage au violet.
J'argumente serie2.animate avec ce modèle d'animation quatre fois.
Notez bien que je n'ai pas eu à nommer trois des quatre ronds ...