Accueil

Traduction

Dessiner avec SVG - sommaire

Sommaire partiellement masqué - faites défiler !

Dessiner avec SVG - recherche

L'auteur : Patrick Darcheville

Vous pouvez me contacter via Facebook pour questions & suggestions : Page Facebook relative à mon site

Animations avec Snap SVG : le rythme

Jusqu'à présent les méthodes d'animation avaient 2 voire 3 arguments (troisième argument : fonction de rappel).
Or entre la durée de l'animation et la fonction de rappel on peut insérer un troisième argument facultatif : le rythme de l'animation.

Je fais cette piqure de rappel sur les transitions et animations CSS à escient comme vous allez comprendre en lisant la suite de mon propos.

Dans le cadre des animations avec Snap SVG on peut aussi avoir des animations avec des rythmes non linéaires comme je montre dans l'exemple ci-dessous.

Exemple

Cliquez sur le premier rond pour lancer l'animation.
Actualisez la page pour revenir à l'état initial.

Les boules se déplacent vers la droite, deviennent opaques et changent de couleur.
Pour chaque boule l'animation dure 10 secondes. Aucune des six boules n'a un rythme de déplacement identique !
Par contre l'état final est identique pour toutes les boules : alignement à droite et grossissement.

Le script

Les "width & height" du viewBox sont 1200 et 600.

La fonction fanimer() comprend 6 parties puisqu'elle s'applique à "serie" qui est un ensemble de 6 formes.
Pour chaque partie il y a 4 arguments.
Le troisième argument est un mot qui précise le rythme de l'animation : linéaire (linear) ou avec rebond (bounce) ou avec accélération (easein) ou décélération (easout) ou effet élastique (elastic).

Donc on retrouve exactement la même terminologie que pour les animations CSS.
Le quatrième argument est la fonction ffin; fonction basée sur le mot "this".

Rythme de l'animation : exemple 2

Le script (extraits)

Dans cet exemple je vous montre les huit valeurs possibles du troisième argument (rythme de l'animation).
Le script peut paraitre un peu long mais paradoxalement il s'écrit très rapidement grâce à des "copier-coller". En effet des groupes de lignes sont pratiquement identiques.
Notez les deux variables anim & duree qui sont utilisées comme arguments de la méthode élément.animate.
Donc si vous voulez complexifier les animations ou modifier leur durée il suffit de changer ces variables.
Pour deux animations (sur 8) il y a en fin d'animation l'appel d'une fonction "ffin" qui élargit le rectangle et le noircit.

A vous de compléter !

Le rendu

Cliquez sur le premier rectangle pour démarrer l'animation.
Actualisez la page pour revenir à l'état initial.

Remarquez que le 4ième rectangle (backin) est très lent au démarrage. Alors que le 5ième (backout) est lui très rapide.