JavaScript est le dernier des moyens que nous aborderons lors de l'animation de SVG. Nous avons examiné le CSS, qui est génial et assez confortable, mais il ne peut pas faire un certain nombre de propriétés SVG que vous voudrez peut-être animer. Ensuite, nous avons examiné SMIL, qui est une syntaxe déclarative directement dans le code SVG lui-même, qui est plus puissante en ce qu'elle peut animer plus de choses, y compris la forme de l'élément lui-même.
JavaScript peut faire tout ce que l'un ou l'autre peut faire et bien le faire. Cela vient juste au prix d'écrire vous-même du code très compliqué ou de la surcharge d'une bibliothèque pour vous aider. Mais une fois que vous êtes opérationnel, la syntaxe peut être vraiment merveilleuse et conviviale pour les animations et les performances peuvent en fait être de premier ordre.
Un autre avantage d'utiliser JavaScript pour les animations SVG est la prise en charge. Il y a beaucoup de bizarreries à craindre lors de l'animation de SVG. Certains navigateurs ne prennent pas en charge les transformations sur les éléments. Certains navigateurs font des choses étranges avec le zoom de page. Certains sont incompatibles avec transform-origin. Les bibliothèques JavaScript aident souvent à résoudre ces problèmes.
Alors que nous parlons spécifiquement d'animation, de nombreuses bibliothèques JavaScript SVG travaillent avec SVG en général. Ils peuvent le créer et le manipuler, accéder aux propriétés de l'élément, les modifier, etc. Un peu comme ajouter une API plus robuste à SVG.
Snag.svg - «jQuery pour SVG»
Exemple de base d'utilisation de Snap.svg:
Voir le Pen BhHix de Chris Coyier (@chriscoyier) sur CodePen.
Une autre chose que nous avons faite dans cette vidéo avec Snap.svg est de convertir ce stylo d'animation CSS en Snap.svg, nous apprenant que nous pouvons utiliser Snap.svg pour travailler avec SVG en ligne déjà sur la page. Adobe a collecté lui-même un certain nombre d'exemples.
Raphael - ancienne bibliothèque du même créateur que Snap.svg
SVG.js - "Une bibliothèque légère pour manipuler et animer SVG." Voici la démo d'horloge que nous avons examinée, montrant comment ces animations fonctionnent en manipulant rapidement le DOM.
D3.js - «D3.js est une bibliothèque JavaScript pour manipuler des documents basés sur des données. D3 vous aide à donner vie aux données à l'aide de HTML, SVG et CSS. » Voici un tutoriel sur la création de SVG avec et une autre introduction à l'animation avec.
GreenSock - "Animation de qualité professionnelle ultra haute performance pour le Web moderne." GreenSock concerne les animations sur le Web en général, mais prend en charge SVG. Voici un stylo où vous pouvez voir comment cela fonctionne.
Velocity.js - "Animation JavaScript accélérée." Aussi une bibliothèque sur l'animation sur le Web en général, qui prend en charge SVG. Julian Shapiro l'a créé et a écrit sur les raisons pour lesquelles l'animation JavaScript peut en fait être le style d'animation le plus performant ainsi que sur le fonctionnement de Velocity.js. Voici une démo très simple animant certaines propriétés spécifiques à SVG.
Vous êtes également libre de le faire vous-même avec des animations JavaScript sans l'aide d'un framework. N'oubliez pas que SVG en ligne est dans le DOM, donc tout le contenu de l'API DOM standard est à votre disposition. Un peu comme vous, vous n'avez pas vraiment besoin de jQuery pour fonctionner avec le DOM, cela facilite souvent les choses. Voici un exemple qui fait les choses à leur manière, c'est assez intéressant.