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
==========
.. code-block:: html
:emphasize-lines: 6,9,10,11
exemple lottie
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
==========
.. code-block:: css
:emphasize-lines: 6,9,10,11
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
=========
.. code-block:: javascript
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) :
.. code-block:: javascript
// 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.