Update 14 octobre : le code est également disponible depuis peu sur un dépôt GitHub. N’hésitez pas à partager et réutiliser, j’ai utilisé Grunt et Bower pour le développement.
Une présentation succinte d’une animation réalisée il y a peu et utilisant le format d’image SVG. J’ai décidé pour cela de m’initier à la librairie Javascript Snap.SVG.
See the Pen Animations with Snap.svg by Hugo (@Hugo8705) on CodePen.
Format SVG
Le format SVG est vraiment un format d’image idéal pour le web et offrant de nombreux avantages aux développeurs et intégrateurs web:
- Il est très léger.
- C’est un format vectoriel, et donc, les images sont étirables sans perte de qualité selon les supports (mobiles, tablettes, écrans…).
- Il peut être manipulé avec CSS.
- Les images SVG peuvent être éditées avec un éditeur texte car elles sont sous forme de XML.
- Il est manipulable avec diverses librairies Javascript.
C’est ce cinquième et dernier point qui est le sujet du jour : manipuler un SVG avec une librairie Javascript, en l’occurence : Snap.SVG.
L’animation
L’animation reprend une illustration que j’ai réalisée avec Adobe Illustrator. L’idée était d’exporter le dessin au format SVG grâce à Illustrator et de pouvoir ensuite le manipuler pour l’animer avec Snap.SVG. Le personnage est animé en boucle et s’anime également au clic et au survol.
Aperçu du personnage animée
Dans Illustrator, bien prendre soin de nommer les calques et les formes. À l’export, Illustrator donnera un id à chaque élément et groupe du SVG en suivant les noms des calques. Exemple :
<g id="tete> <path id="oreille_gauche" .../> <path id="oreille_droite" .../> <path id="visage" .../> </g>
Une fois mon SVG exporté, j’ai commencé à l’animer avec Snap.SVG. Pour sélectionner chacun des objets et les manipuler, on utilise :
Snap.select("#id_objet")
Les manipulations ici sont de simples fonctions .animate avec différents paramètres :
- Utilisation d’un masque d’objet animé du haut vers le bas toutes les 5 secondes pour le clignement des yeux.
- Rotation de plusieurs élément simultanément pour l’effet de survol.
- Translation de tout l’objet renard vers le haut puis vers le bas avec un effet bounce pour le petit saut au clic.
La difficulté ici était surtout de donner les bons paramètres à la fonction .animate. Snap.svg utilise les même paramètres d’animation que la librairie Javascript Raphaël et il faut un temps d’adaptation pour apprendre à utiliser les paramètres : obtenir une animations dans la bonne direction, modifier le centre de rotation d’un objet, chaîner plusieurs animation à la suite des autres…
De plus, certaines manipulations peuvent également être faites avec CSS (modifier le centre de rotation d’un objet par exemple) et cela peut être mêlant au départ. Malgré ça, j’ai quand même réussi à animer mon personnage comme je voulais.
La librairie Snap.SVG nécessite un temps d’adaptation mais elle offre vraiment de nombreuses possibilités pour animer des SVG.