(Avancé) expressions et interactions
####################################

.. note::

   Le support des expressions est limité : `voir la documentation <https://github.com/airbnb/lottie-web/wiki/Expressions>`_

Le support des expressions est relativement limité : oubliez ``time``, ``wiggle``, etc…

Vous pouvez par contre lier des éléments les uns aux autres d'un calque à l'autre.

Exemple d'usage avancé
**********************

En trichant un peu, il est possible de bricoler des choses.

Ici, on souhaite pouvoir lier des expressions avec des interactions (survolez l'animation) :

.. raw:: html

   <div style="max-width:256px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAKCAYAAACNMs+9AAAAGklEQVQYlWM4c+bMf3TMgA0MBYWDzDkUKQQAlHCpV9ycHeMAAAAASUVORK5CYII=) repeat;margin-bottom:2em;" id="mon-animation"></div>
   <script src="../../_static/lottie.min.js" charset="utf-8"></script>
   <script type="text/javascript">
   var x = 0;
   var y = 0;

   var animation = bodymovin.loadAnimation({
     container: document.getElementById('mon-animation'),
     path: '../../_static/animations/animation-modifie.json',
     renderer: 'svg',
     loop: true,
     autoplay: true,
   })

   animation.addEventListener( 'DOMLoaded', function () {

      var cible = document.querySelector( '#mon-animation svg');

      // on ajoute un écouteur d'événement
      cible.addEventListener( 'mousemove', obtenir_pourcentage_largeur, false );

      // la fonction est appelée par l'écouteur d'événement
      function obtenir_pourcentage_largeur ( evenement ) {
         /* calcul la position du curseur sur la vue sous forme de %
         et l'assigner à x et y
         le * 60 - 30 permet d'avoir une valeur entre -50 et 50 */
         x = evenement.clientX / window.innerWidth * 100 - 50;
         y = evenement.clientY / window.innerHeight * 100 - 50;
      }
   } );

   </script>

Fichiers
========

:download:`projet-expressions.zip`

master.js
=========

Ici l'on créé les variables et les interactions

.. code-block:: javascript

   // on déclare nos variables
   var x = 0;
   var y = 0;

   // on ajoute un écouteur d'événement
   document.body.addEventListener( 'mousemove', obtenir_pourcentage_largeur, false );

   // la fonction est appelée par l'écouteur d'événement
   function obtenir_pourcentage_largeur ( evenement ) {
      /* calcul la position du curseur sur la vue sous forme de %
      et l'assigner à x et y
      le * 60 - 30 permet d'avoir une valeur entre -30 et 30 */
      x = evenement.clientX / window.innerWidth * 60 - 30;
      y = evenement.clientY / window.innerHeight * 60 - 30;
   }

expressions
===========

.. code-block:: javascript

   var x = 0; // si ces deux premières lignes ne sont pas présentes,
   var y = 0; // l'expression sera erronée et pas exportée
   [position[0]+x,position[1]+y]

.. note::

   À ce stade, le dispositif ne fonctionnera pas à cause des deux premières lignes de l'expression.

   Ces deux lignes ne peuvent pas être enlevées dans After Effects (sinon l'expression ne sera pas exportée). Il faut éditer le fichier .json exporté afin d'enlever ces deux lignes.

   Comparez les fichiers ``animation.json`` et ``animation-modifie.json``