Lottie, BodyMovin…
##################

Pour quoi faire ?
*****************

Pour exporter pour le web et les applications mobiles, des animations créés avec After Effects.

Que va-t-on utiliser ?
**********************

* After Effects pour créer les animations
* BodyMovin pour exporter les animations
* Lottie pour lire les animations dans le navigateur
* Un navigateur web pour afficher les animations

De quoi s'agit-il ?
*******************

**Lottie** est une librairie permettant de lire des animations.

**BodyMovin** est une extension disponible pour After Effect, permettant d'exporter des animations pouvant être lues par **Lottie**.

Les animations sont exportées au format **JSON**.

**JSON** est un format de données textuel dérivé de JavaScript.

Ces animations sont destinées à être utilisées :

* sur des applications mobiles
* sur le web

.. figure:: ../../diagrammes/vue-d-ensemble.svg
   :align: center

   Schéma résumé

.. seealso::

   * `Page de présentation de Lottie <https://airbnb.design/lottie/>`_
   * `Page secondaire de présentation plus fournie <https://airbnb.design/introducing-lottie/>`_

   On peut noter que la possibilité de lire les animations directement sur une page web n'est pas mise en avant, au profit de Android/iOS et React.

----

Côté After Effects
==================

.. figure:: ../../diagrammes/cote-after.svg
   :align: center

Côté Navigateur
===============

.. figure:: ../../diagrammes/cote-navigateur.svg
   :align: center

----

De quoi a-t-on besoin ?
***********************

Pour exporter des animations
============================

* Du logiciel After Effects
* De l'extension BodyMovin (Voir  :ref:`pratique__installer-bodymovin`)

Pour lire les animations sur un navigateur web
==============================================

* D'un navigateur web
* d'un serveur (local dans notre cas, voir :ref:`pratique__installer-serveur-local`)
* de la librairie JavaScript Lottie (voir :ref:`pratique__telecharger-lottie-js`)


.. [#application-native] Par application native on entendra dans le cadre des périphériques mobiles application programmée en utilisant le langage de développement natif du système (système qui peut être Android, iOS…). On peut opposer cela aux applications développées en HTML/CSS/JS encapsulées dans des navigateurs web.