Exemple simple¶

étape 1 : créer une animation et l’exporter¶

Note

Il est bien évidemment attendu que vous ayez installé au préalable bodymovin dans After Effects.

créez une composition de 500px par 500px, d’une durée de 30 secondes.
créez un calque de forme, avec une forme
animez la forme
Ouvrez le panneau Bodymovin ( Fenêtres → Extensions → Bodymovin )
Cliquez sur les … dans la ligne de votre composition, sous la mention « ./Destination Folder » et choisissez l’endroit de votre export
Lancez le rendu avec « render »
localisez le fichier .json de l’export

étape 2 : mettre en place un environnement web¶

créez un dossier, et placez-y votre export json (appelez-le data.json)
dans ce dossier, à l’aide d’un éditeur de code, créez les fichiers suivants :
- index.html
- master.css
- lottie.js
- master.js
- (le fichier data.json n’est pas à créer mais à placer dans ledit dossier, c’est votre export AE)

index.html¶

<!DOCTYPE html>
<html lang="fr" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>exemple lottie</title>
      <link rel="stylesheet" href="master.css">
   </head>
   <body>
      <div id="conteneur_animation"></div>
      <script src="lottie.js" charset="utf-8"></script>
      <script src="master.js" charset="utf-8"></script>
   </body>
</html>

Les lignes surlignées sont celles qui nous intéressent, dans l’ordre

import du css
conteneur pour notre animation
import de la librairie lottie
import du reste du javascript

master.css¶

html, body {
  width: 100%;
  height:100%;
  margin: 0;
}

[id=conteneur_animation] {
  width: 100%;
  height: 100%;
}

Partie 1 :

on sélectionne les éléments html et body
on les contraints à remplir l’espace de la page
on supprime les marges par défaut

Partie 2 :

on sélectionne notre conteneur
on les contraints à remplir l’espace de l’élément parent (body)

master.js¶

var conteneur = document.getElementById('conteneur_animation');

var anim_exemple_simple = bodymovin.loadAnimation({
  container: conteneur, // conteneur, obligatoire
  path: 'data.json', // fichier de données, obligatoire
  renderer: 'svg', // requis, moteur de rendu parmi 'svg','canvas','html'
  loop: true, // optionnel
  autoplay: true, // optionnel
  name: 'exemple-simple', // optionnel, permet de sélectionner l'animation par la suite dans certains cas (mettre un nom unique !)
})

Ici, notez que l’on créé un objet animation en utilisant bodymovin (fourni par lottie.js), et plus exactement la méthode loadAnimation de ce dernier, en lui passant en paramètre un objet (une collection de couples clé-valeur) servant à paramétrer notre animation.

lottie.js¶

Ce fichier doit contenir la librairie récupérable ici : https://cdnjs.com/libraries/bodymovin

Notez qu’il existe différentes versions : version light, version avec seulement un moteur de rendu spécifique (svg, canvas, html)…

tip : prenez cette version

étape 3 : vérifier si ça marche¶

lancez un serveur local servant votre dossier (voir l’annexe « créer un serveur avec node.js »)
affichez le résultat dans un navigateur

étape 4 : manipuler notre animation¶

Jetez un oeil à cette partie de la documentation

Puis, ouvrez la console du navigateur (dans les outils de développement).

Vous vous souvenez que dans master.js, nous avions créé un objet animation dont nous avions gardé la référence dans un espace mémoire associé à l’identificateur anim_exemple_simple ?

Testez maintenant dans la console anim_exemple_simple.pause(), anim_exemple_simple.play(), anim_exemple_simple.stop()

étape 5 : ajouter une interactivité simple¶

Dans le fichier master.js, ajoutez le code suivant (à la fin du fichier) :

// lors du clic sur conteneur, on déclenche la fonction interaction
conteneur.addEventListener( 'click', interaction )

function interaction () {

   // si l'animation est en pause
   if ( anim_exemple_simple.isPaused ) {

      // on la lance
      anim_exemple_simple.play();

   // sinon
   } else {

      // on la met en pause
      anim_exemple_simple.pause();
   }
}

Normalement, Le clic sur l’animation permet d’activer/désactiver celle-ci.