Anime.js: Animer des éléments SVG

Par ppatel, 22 février, 2025

Animation SVG Dans les articles précédents, nous avons exploré les bases d'Anime.js et la gestion des timelines pour orchestrer des animations complexes. Aujourd'hui, nous allons nous concentrer sur l'animation des éléments SVG (Scalable Vector Graphics) avec Anime.js, une compétence essentielle pour créer des interfaces web interactives et attrayantes.

Qu'est-ce que le format SVG ?

Le SVG (Scalable Vector Graphics) est un format d'image vectorielle basé sur le langage XML, conçu pour décrire des graphiques bidimensionnels. Contrairement aux images matricielles (comme JPEG ou PNG) composées de pixels, les images SVG sont constituées de formes géométriques définies par des formules mathématiques. Cette caractéristique permet aux SVG d'être redimensionnés à l'infini sans perte de qualité, ce qui les rend idéaux pour les logos, icônes et illustrations nécessitant une mise à l'échelle flexible.

En programmation, le SVG offre plusieurs avantages :

  • Interactivité et animation: Étant du code XML, les éléments SVG peuvent être manipulés via CSS et JavaScript, permettant de créer des animations et des interactions dynamiques directement dans le navigateur.
  • Intégration web fluide: Les fichiers SVG peuvent être intégrés directement dans le code HTML, offrant un contrôle précis sur le style et le comportement des graphiques. Cette intégration facilite également l'accessibilité et l'optimisation pour les moteurs de recherche.
  • Légèreté et performance: Les fichiers SVG sont généralement plus légers que les images matricielles, surtout pour les graphiques simples, ce qui contribue à des temps de chargement plus rapides et une meilleure performance des sites web.

De plus, le SVG est un standard ouvert développé par le W3C, ce qui assure une large compatibilité et un support constant à travers les différentes plateformes et navigateurs.

Pourquoi animer des éléments SVG ?

Les SVG sont des graphiques vectoriels qui peuvent être redimensionnés sans perte de qualité, ce qui les rend idéaux pour le web. En animant des éléments SVG, vous pouvez:

  • Améliorer l'interactivité: Les animations rendent les interfaces plus engageantes pour les utilisateurs.
  • Illustrer des concepts: Des animations peuvent aider à expliquer des idées complexes de manière visuelle.
  • Ajouter du dynamisme: Elles apportent une touche moderne et dynamique à vos pages web.

Anime.js facilite grandement l'animation des éléments SVG en offrant une syntaxe simple et puissante.

Comment animer des éléments SVG avec Anime.js

Pour commencer, assurez-vous d'avoir inclus Anime.js dans votre projet. Vous pouvez le faire en ajoutant la bibliothèque via un CDN:

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>

Ensuite, intégrez votre SVG directement dans le code HTML pour permettre une manipulation aisée des éléments à animer.

Exemple 1 : Animer un élément le long d’un chemin SVG

Ce code permet à un cercle de suivre la trajectoire définie par un chemin. Le cercle se déplace et pivote selon les coordonnées et l'angle du chemin:

<svg width="500" height="300">
  <!-- Chemin de trajectoire -->
  <path id="motionPath" d="M50,250 Q250,50 450,250 T850,250" fill="none" stroke="gray" />
  <!-- Élément à animer -->
  <circle class="circle" cx="50" cy="250" r="10" fill="red" />
</svg>

<script>
  // Récupère la trajectoire définie par le chemin
  var path = anime.path('#motionPath');
  anime({
    targets: '.circle',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'linear',
    duration: 4000,
    loop: true
  });
</script>

Explication:

  • Le définit une trajectoire.
  • Le suit cette trajectoire en ajustant sa position (translateX, translateY) et sa rotation (rotate).
  • L'animation dure 4000 ms et se répète en boucle.

Exemple 2 : Dessin progressif d’un chemin

<svg width="300" height="200">
  <path class="line" d="M20,20 L280,20" stroke="black" stroke-width="2" fill="none" />
</svg>

<script>
  anime({
    targets: '.line',
    strokeDashoffset: [anime.setDashoffset, 0],
    duration: 2000,
    easing: 'easeInOutQuad'
  });
</script>

Explication:

  • La fonction anime.setDashoffset calcule la longueur du chemin.
  • L'animation ramène la valeur de stroke-dashoffset de cette longueur à 0, créant ainsi l'effet de tracé.
  • Le dessin s’effectue sur 2000 ms avec un easing fluide.

Exemple 3 : Morphing de formes SVG

Le morphing consiste à transformer une forme SVG en une autre de manière fluide. C'est une technique puissante pour créer des animations captivantes.

Ce code transforme progressivement un carré en une forme circulaire en animant l'attribut d qui définit le tracé du SVG.

<svg width="200" height="200">
  <!-- Forme initiale : un carré -->
  <path id="shape1" d="M50 50 L150 50 L150 150 L50 150 Z" fill="blue"/>
  <!-- Forme cible : une approximation de cercle (invisible au départ) -->
  <path id="shape2" d="M100 30 A70 70 0 1 0 100 170 A70 70 0 1 0 100 30" fill="green" visibility="hidden"/>
</svg>

<script>
  anime({
    targets: '#shape1',
    d: [
      { value: document.querySelector('#shape2').getAttribute('d') }
    ],
    duration: 2000,
    easing: 'easeInOutQuad'
  });
</script>
  • Explication :
    • Le carré défini par #shape1 est animé pour adopter le tracé défini par #shape2.
    • L'animation se déroule sur 2000 ms avec un easing permettant un morphing fluide.
    • Explication du chemin d:
      • M50 50 : Move to – déplace le point de départ à la coordonnée (50, 50).
      • L150 50 : Line to – trace une ligne jusqu'à la coordonnée (150, 50).
      • L150 150 : Line to – trace une ligne jusqu'à la coordonnée (150, 150).
      • L50 150 : Line to – trace une ligne jusqu'à la coordonnée (50, 150).
      • Z : Close path – ferme le chemin en reliant le point actuel au point de départ.

Exemple 4 : Animer un SVG embarqué via un objet

Ce code montre comment animer des éléments d'un SVG chargé via un . Le script attend que le SVG soit chargé, puis convertit le NodeList en tableau pour l’animer correctement.

<object id="my-diagram" type="image/svg+xml" data="diagram.svg"></object>

<script>
document.addEventListener('DOMContentLoaded', function () {
  document.getElementById('my-diagram').addEventListener("load", function() {
    const innerDoc = document.getElementById('my-diagram').contentDocument;
    anime({
      targets: [...innerDoc.querySelectorAll("#fun-group *")],
      translateX: 10,
      duration: 1000,
      easing: 'easeInOutQuad'
    });
  });
});
</script>
  • Explication :
    • Le charge un fichier SVG externe.
    • Une fois le SVG chargé, le script sélectionne les éléments du groupe ciblé et les anime en les déplaçant horizontalement de 10 pixels.
    • L'opérateur de décomposition ([...]) convertit le NodeList en tableau pour permettre son animation.

Conclusion et perspectives

Animer des éléments SVG avec Anime.js ouvre la porte à des interfaces web plus interactives et attrayantes. En combinant la puissance des graphiques vectoriels avec la flexibilité d'Anime.js, vous pouvez créer des animations sophistiquées avec un code minimal. Dans le prochain article, nous explorerons comment synchroniser des animations SVG avec des interactions utilisateur pour créer des expériences encore plus immersives.

Références consultées

Commentaires1

jcherilus

il y a 4 semaines 1 jour

Super article ! Tu as très bien expliqué les bases de l'animation SVG avec Anime.js,Par contre j'aurais aimé qu'il y ait des commentaires certaines parties du code pour aider encore plus les débutants à saisir facilement ce que chaque ligne fait.