Animer ses tracés SVG avec Vivus.js

L’utilisation du SVG est de plus en plus fréquente dans la composition de nos éléments d’illustration, nos logotypes ou encore nos icônes. L’un des avantages du SVG est sa capacité à s’adapter à tout type de densité de pixels. Un autre avantage est sa capacité à hériter de styles CSS et la possibilité d’animation.

Veni, vidi, Vivus

Vivus.js est une bibliothèque JS très légère et sans aucune dépendance (pas de jQuery, Zepto ou MooTools à charger) vous permettant d’animer vos tracés SVG assez simplement.
Celle-ci propose différents types d’animation par défaut et un système de mise en place de scénario.

Comment fonctionne-elle ?

Pour créer ses différentes animations, le script utilise la propriété CSS strokeDashoffset des éléments de tracé. Cette propriété gère le décalage du tracé de chaque ligne du SVG. Ajoutez un peu de JS pour mettre à jour la valeur de décalage progressivement et la magie fait son effet.
Malheureusement, il y a un problème avec cette propriété qui n’est disponible que sur l’élément path. Donc si vous utilisez des circle, rect, line ou polyline, l’animation ne fonctionnera pas. À cause de cela, une autre classe est disponible dans le répertoire du projet, appelée pathformer. Son but est de transformer tous les objets de votre SVG en éléments path afin que la propriété puisse être utilisée et animer votre SVG.

L’animation se déroule toujours en « dessinant » les éléments dans le même ordre, dans l’ordre d’apparition des tags SVG.

Ce code est inspiré d’autres travaux existants. Le script qui dessine les tracés est inspiré de l’article SVG Drawing Animation (ressources que je diffuse régulièrement dans les Ressources du Web ou sur mon compte Twitter). La classe pathformer est inspirée de SVGPathConverter de Waest.

Comment l’utiliser ?

C’est relativement simple, à partir du moment où vous avez votre tracé SVG. Je ne vais pas vous apprendre à faire du dessin vectoriel :p

1. Téléchargez l’archive zippée depuis Github
2. Placez les fichiers se trouvant dans le dossier « src » de l’archive dans votre projet web
3. Avant la balise </body> chargez les deux fichiers comme suit :

   <script src="assets/js/vivus.js"></script>

4. Puis en dessous de cet appel JS, initialisez l’animation comme suit :

   <script>
   var anim1 = new Vivus(
      'animation-id', 
      {
         type:     'delayed',
         duration: 150,
         start:    'autostart',
         delay:    10, //seulement pour le type "delayed"
         selfDestroy: false
      },
      function() {
         // fonction de callback
      }
   );
   </script>

Une fois l’animation initialisée vous avez accès à 3 méthodes pour contrôler l’animation : play, stop et reset à utiliser comme suit :

anim1.reset();
anim1.play();

Les types scenario permettent également de jouer avec un scénario plus précis dont les étapes sont définies directement dans des attributs data-* posés sur les composants du SVG directement.
Pour plus de détail, je vous renvoie sur la documentation officielle.

Amusez-vous bien !

Télécharger le script vivus.js Consulter la doc et les démo