12
NOV

Vivus.js - Animez facilement et précisément vos SVG

Publié le 12/11/14 à 08h35 par DJo

Vivus.js est une bibliothèque Javascript permettant d'animer facilement et de différentes manières vos SVG.

Vivus.js est une bibliothèque Javascript permettant d'animer facilement et de différentes manières vos SVG.

Avec ce type de bibliothèques Javascript, la mode du SVG animé n'est pas prête de passer !

Vivus.js vous permettra d'animer facilement vos différents éléments path de vos fichiers SVG.

Pour fonctionner, vivus utilise la propriété strokeDashoffset pour animer pas à pas le path du SVG. Seuls les lignes en path sont animées, il faut donc convertir les éléments qui ne le sont pas comme les circle etc.

SVG Animation stratégie

Il est possible de définir sa stratégie d'animation du SVG:

  • Delayed: Chaque path est animé en même temps avec un léger délai entre chaque élément.
  • Async: Chaque path est animé de manière asynchrone et termine en même temps.
  • OneByOne: Chaque path est animé l'un après l'autre.

Techniquement, voici comment animer un SVG avec la stratégie souhaitée:

new Vivus('my-svg-id', {type: 'delayed', duration: 200}, myCallback);

Il est aussi possible de choisir votre propre scénario d'animation et temporiser vous même certains éléments path:

<svg>
  <circle data-start="0" data-duration="10" ... />
  <circle data-start="20" data-duration="10" ... />
  <circle data-start="20" data-duration="20" ... />
  <circle data-start="0" data-duration="30" ... />
</svg>

Pratique pour animer une partie du SVG tout de suite et le reste en décalé...

A tester !

 

Site Officiel

Personne n'a baraguiné de chtite phrase pour le moment !


Ajouter un Commentaire

Pour poster un commentaire, vous devez être identifié. Vous pouvez choisir parmi ces trois méthodes d'identification:

Compte la Ferme du Web

Identifiez-vous
Inscrivez-vous

Compte Facebook

Connexion avec Facebook

Compte Twitter

Connexion avec votre compte twitter
Rechercher sur la Ferme du web