déclencher la lecture de différentes phases de l'animation
##########################################################
On suppose ici une animation sur 150 frames.
Pour connaître le nombre de frames de votre animation, vous pouvez tapez ``votre_animation.totalFrames`` dans la console du navigateur (en adaptant à l'identificateur utilisé pour déclarer votre animation).
vidéo rapide
************
.. raw:: html
html
****
Dans cet exemple, on utilise des boutons, ce n'est pas du tout obligatoire, il est même recommandé de trouver mieux.
.. code-block:: html
exemple lottie
javascript
**********
.. code-block:: javascript
var conteneur = document.getElementById('conteneur_animation');
var animation = 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 !)
})
/* on sélectionne nos boutons */
var bouton_a = document.querySelector("#bouton-a");
var bouton_b = document.querySelector("#bouton-b");
var bouton_c = document.querySelector("#bouton-c");
var bouton_d = document.querySelector("#bouton-d");
var bouton_e = document.querySelector("#bouton-e");
var bouton_f = document.querySelector("#bouton-f");
/* on créé des variables pour nos séquences */
var sequence_a = [0,49]; // de la frame 0 à 49
var sequence_b = [50,99]; // de la frame 50 à 99
var sequence_c = [100,150]; // de la frame 50 à 99
var sequence_d = [0,150]; // de la frame 50 à 99
var sequence_b_puis_c = [ sequence_b, sequence_c ]; // de la frame 50 à 99
animation.addEventListener("DOMLoaded", function(){
animation.playSegments( sequence_a );
});
bouton_a.addEventListener('click', function () {
animation.playSegments( sequence_a );
});
bouton_b.addEventListener('click', function () {
animation.playSegments( sequence_b );
});
bouton_c.addEventListener('click', function () {
animation.playSegments( sequence_c );
});
bouton_d.addEventListener('click', function () {
animation.playSegments( sequence_b_puis_c );
});
bouton_e.addEventListener('click', function () {
animation.playSegments( sequence_b, true );
});
bouton_f.addEventListener('click', function () {
animation.playSegments( sequence_d, true );
});