8 bibliothèques JavaScript pour animer SVG
SVG est un graphique indépendant de la résolution. Cela signifie que ce sera fière allure sur tout type d’écran sans perte de qualité. Au-delà de cela, vous pouvez aussi rendre SVG vivant avec des effets d'animation.
Dans l’un des articles de notre série SVG précédemment, nous vous avons montré comment l’animation SVG fonctionne avec
Plus sur Hongkiat.com:
- Animate.css - Bibliothèque CSS3 pour créer facilement une animation
- Animez facilement du texte avec Textillate.js
- Comment convertir du texte Photoshop en SVG
- Animer pour masquer et glisser du contenu avec jQuery
1. Vivus
Vivus est une bibliothèque JavaScript qui donne à votre SVG l'apparence d'être dessiné. Vivus fonctionne par défaut sans aucune dépendance (par exemple, jQuery). Inclure simplement le .js fichier dans votre HTML, et désigner l'élément SVG que vous souhaitez animer, avec quelques options prédéfinies pour démarrer l'animation tout de suite.
Par exemple:
new Vivus ('svg-element', type: 'oneByOne', durée: 200); Ce qui précède animera mon élément SVG qui a le svg-element ID en 200 millisecondes. Chaque élément de ce SVG sera tracé l’un après l’autre dans cet intervalle 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 supporte à la fois le type graphique HTML5 Canvas et SVG. Avec Bonsai, vous pouvez construire un rectangle simple ou un cercle ou si vous le souhaitez, un multijoueur à part entière jeu d'animation comme celui-ci. Vous pouvez utiliser Orbit pour découvrir comment fonctionne le bonsaï en direct ou consulter quelques exemples impressionnants pour vous inspirer..
3. Vitesse
Velocity est une bibliothèque JavaScript conçue pour les animations rapides. La vitesse de Velocity lors du rendu d'une animation est incroyablement rapide. Il surpasse jQuery, et même CSS, en comparaison. L'API de Velocity fonctionne de manière similaire à l'animation dans jQuery, sauf qu'elle utilise le mot clé alias. $ .velocity () au lieu de $ .animate (). Cela dit, vous pouvez utiliser exactement les mêmes mots clés d’animation tels que fadeIn et disparaître.
4. Raphaël
RaphaelJS est une bibliothèque qui vous permet de dessiner et d’animer des graphiques SVG vectoriels sur des pages Web. Il supporte un large éventail de navigateurs jusqu’à IE6, ce qui fait de Raphael la bibliothèque JavaScript la plus fiable de la niche. Avec RaphaelJS, vous pouvez créer des tableaux analytiques interactifs, des cartes du monde et des interactions de jeux similaires à ceux de Counter Strike..
5. Snap
SnapSVG est une autre bibliothèque JavaScript populaire pour l'animation SVG développée par le développeur de Raphael, Dmitry Baranovskiy, en collaboration avec l'équipe Adobe Web Platform. Contrairement à Raphael, SnapSVG est destiné uniquement aux navigateurs les plus récents. Cela permet à la bibliothèque d'être nettement plus petite que Raphael et de prendre en charge des fonctionnalités SVG telles que le découpage et le masquage..
6. peintre de lignes paresseux
Lazy Line Painter est un plugin jQuery pour animer les chemins SVG afin d'animer la séquence de dessin, à l'instar de 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 telles qu'Illustrator ou Inkscape, assurez-vous qu'il ne reste aucune couleur de remplissage sur votre SVG, mais uniquement les chemins d'accès..
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. Cela n'anime pas seulement cependant; vous pouvez également appliquer des plugins supplémentaires pour ajouter des fonctionnalités supplémentaires. Cet exemple utilise le plug-in svg.filter.js pour appliquer des filtres tels que le flou gaussien, le désaturation, le contraste, le sépia, etc. à l'image..
8. Passerelle
Passerelle supporte trois types d'éléments, chemin, ligne, et polyligne utilisé pour dessiner des lignes SVG. Voici un exemple tiré de Polygon qui montre l’animation en ligne de la console PlayStation 4..
