8 librairies Javascript pour animer les SVG

SVG est un graphique indépendant de la résolution. Cela signifie qu’il aura fière allure sur n’importe quel type d’écran sans subir de perte de qualité. Au-delà de cela, vous pouvez également donner vie à SVG avec des effets d’animation.

1. Vivus

Vivus est une bibliothèque JavaScript qui donne à votre SVG l’apparence d’être dessiné. Vivus fonctionne hors de la boîte sans avoir besoin de dépendances (par exemple, jQuery). Incluez simplement le fichier .js dans votre HTML et désignez l’élément SVG que vous souhaitez animer, ainsi que quelques options prédéfinies pour démarrer immédiatement l’animation.

Par exemple:

new Vivus (‘svg-element’, {type: ‘oneByOne’, duration: 200});
Ce qui précède animera mon élément SVG qui a l’ID d’élément svg en 200 millisecondes. Chaque élément de ce SVG sera dessiné l’un après l’autre dans ce laps de temps.

2. Bonsaï

Bonsai est une puissante bibliothèque JavaScript qui vous permet de dessiner, de transformer et d’animer des éléments graphiques sur des pages Web.

Il prend en charge le type graphique HTML5 Canvas et SVG. Avec Bonsai, vous pouvez créer un simple rectangle ou un cercle ou si vous le souhaitez, un jeu animé multijoueur à part entière comme celui-ci.

Vous pouvez utiliser Orbit pour ressentir le fonctionnement de Bonsai en action réelle ou consulter quelques exemples impressionnants dont vous pourrez vous inspirer.

3. Velocity

Velocity est une bibliothèque JavaScript conçue pour des animations rapides. La vitesse de la vélocité lors du rendu de l’animation est incroyablement rapide. Il surpasse jQuery, et même CSS, en comparaison.

L’API de Velocity fonctionne de manière similaire à l’animation de jQuery, sauf qu’elle utilise l’alias de mot clé $ .velocity () au lieu de $ .animate (). Cela mis à part, vous pouvez utiliser exactement les mêmes mots-clés d’animation tels que fadeIn et fadeOut.

4. Raphaël

RaphaelJS est une bibliothèque qui vous permet de dessiner et d’animer des graphiques vectoriels SVG sur des pages Web. Il prend en charge un large éventail de navigateurs, ce qui fait de Raphael la bibliothèque JavaScript la plus fiable du créneau.

Avec RaphaelJS, vous pouvez créer des graphiques analytiques interactifs, des cartes du monde et des interactions de jeu similaires à celles de Counter Strike.

5. Snap

SnapSVG est une autre bibliothèque JavaScript populaire pour l’animation SVG développée par le développeur Raphael, Dmitry Baranovskiy, avec l’équipe Adobe Web Platform à partir de zéro.

Contrairement à Raphael, SnapSVG est destiné uniquement aux derniers navigateurs. Cela permet à la bibliothèque d’être nettement plus petite que Raphael et de prendre en charge les fonctionnalités SVG telles que le découpage et le masquage.

6. Lazy Line Painter

Lazy Line Painter est un plugin jQuery pour animer les chemins SVG pour animer la séquence de dessin, similaire à Vivus.

La mauvaise nouvelle est que ce plugin ne fait que cette chose très spécifique. Par conséquent, lorsque vous importez du SVG à partir d’applications comme Illustrator ou Inkscape, assurez-vous qu’il ne reste plus de couleur de remplissage sur votre SVG, juste les chemins.

7. SVG.js

SVG.js est une bibliothèque légère pour manipuler et animer SVG. Avec cette bibliothèque, vous pourrez animer la taille, la position ou la couleur de votre élément SVG.

Mais cela n’anime pas seulement; vous pouvez également appliquer des plugins supplémentaires pour ajouter des fonctionnalités supplémentaires. Cet exemple utilise le plugin svg.filter.js pour appliquer des filtres comme le flou gaussien, la désaturation, le contraste, le sépia etc. à l’image.

8. Walkway

Walkway prend en charge trois types d’éléments, chemin, ligne et polyligne utilisés pour dessiner des lignes SVG. Voici un exemple de Polygon qui montre l’animation de la ligne de la console PlayStation 4.

Partager:

Partager sur facebook
Facebook
Partager sur twitter
Twitter
Partager sur linkedin
LinkedIn

À voir également