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¶

html¶

Dans cet exemple, on utilise des boutons, ce n’est pas du tout obligatoire, il est même recommandé de trouver mieux.

<!DOCTYPE html>
<html lang="fr" dir="ltr">
   <head>
      <meta charset="utf-8">
      <title>exemple lottie</title>
      <link rel="stylesheet" href="master.css">
   </head>
   <body>
      <button id="bouton-a">0-49</button>
      <button id="bouton-b">50-99</button>
      <button id="bouton-c">100-150</button>
      <button id="bouton-d">0-49 puis 50-99</button>
      <button id="bouton-e">forcer lecture immédiate 50-99</button>
      <button id="bouton-f">0-150</button>
      <div id="conteneur_animation"></div>
      <script src="lottie.js" charset="utf-8"></script>
      <script src="master.js" charset="utf-8"></script>
   </body>
</html>

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 );
});