Lottie Animation

Qu'est-ce que Lottie ? 🧠

Lottie est un format d'animation vectorielle se basant sur des données au format JSON. Il a été créé en 2015 par la société américaine Airbnb.

Airbnb utilise beaucoup d'animations dans son parcours utilisateur et il était souvent problématique pour les développeurs d'intégrer correctement les animations faites par les designers. Les GIFs fournis étaient difficilement adaptables à la résolution d’écran de l’utilisateur et mettait parfois du temps à se charger.

Partant de ce constat, Airbnb a développé un plugin sur le logiciel Adobe After Effects baptisé Bodymovin. Ce plugin permet d'exporter des animations dans un fichier au format JSON.

Le fichier au format JSON peut ensuite être interprété par les différentes librairies proposées par Lottie : sur un navigateur web, sur une application téléphone native ou encore sur une application Windows.

Les avantages de Lottie sont nombreux :

Le format est multi-plateforme. Le fichier JSON reste inchangé entre les différentes plateformes cibles.
La résolution des images s'adapte en fonction de la taille de l'écran de l'utilisateur puisque les animations sont au format vectoriel.
Une animation Lottie est beaucoup plus légère qu'une séquence d'images PNG ou encore un GIF.

"If a PNG is a T-Rex, and a GIF is an elephant, then a Lottie is a puppy."

Le format Lottie est beaucoup plus portable que des fichiers SVG animés en CSS.
Lottie offre également une interface web de modification des animations. Il est donc possible de changer un élément graphique de l'animation puis de réexporter le fichier JSON associé.

Notre besoin chez Indy 💻

Chez Indy, nous souhaitons proposer à nos utilisateurs une expérience moderne et intuitive afin de faciliter leur compréhension de la comptabilité, une notion parfois difficile à appréhender.

Le but était d'annoncer une nouvelle fonctionnalité dans l'application via une animation Lottie.

Réalisation technique de l'intégration de l'animation 🛠️

Création d'un composant Vue générique 🖌️

Nous avons créé un composant générique responsable du chargement de l'animation via la méthode loadAnimation de la bibliothèque lottie-web. L'utilisation d'animation Lottie dans l'application passe obligatoirement par ce composant.

Ce composant prend en compte 3 props :

lottieJsonPath : le chemin vers la source de données JSON. Ce paramètre est évidemment obligatoire.
loopAnimation : l'animation doit-elle être jouée en boucle ? Paramètre optionnel.
autoPlayAnimation : l'animation doit-elle être jouée à l'initialisation du composant ? Paramètre optionnel.

La méthode loadAnimation peut également prendre en compte d'autres paramètres (cf. la documentation), mais nous jugions que ceux-ci étaient inutiles dans notre utilisation. En effet chez Indy, nous respectons le principe YAGNI (« You ain't gonna need it », qui peut se traduire par « vous n'en aurez pas besoin »). Nous évitons au maximum l’importation de librairies inutiles et l’implémentation de code non utilisés dans l’application.

Voici ce à quoi ressemble le composant LottieAnimation :

<template>
  <div ref="animationContainer" />
</template>

<script>
export default {
  name: 'LottieAnimation',
  props: {
    lottieJsonPath: {
      // the JSON path linked to the animation
      type: String,
      required: true,
    },
    loopAnimation: {
      // Do we want the animation to loop?
      type: Boolean,
      required: false,
      default: true,
    },
    autoPlayAnimation: {
      // Do we want to play the animation on initialization?
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data: () => ({
    rendererSettings: {
      scaleMode: 'centerCrop',
      clearCanvas: true,
      progressiveLoad: false,
      hideOnTransparent: true,
    },
    lottieAnimation: undefined,
  }),
  async mounted() {
    await this.init();
  },
  beforeDestroy() {
    this.lottieAnimation?.destroy();
  },
  methods: {
    [...]
  },
};
</script>

⚠️ Il est important d'appeler la méthode destroy sur l'objet contenant l'animation dans le hook beforeDestroy de Vue pour éviter les fuites de mémoire.

Lazy loading de la bibliothèque lottie-web ⚙️

La bibliothèque lottie-web est une bibliothèque plutôt lourde (taille gzipped à 67.3 Ko). Ceci est particulièrement impactant si la bibliothèque est située dans le chunk principal lors du build.

Le chargement de la page principale pour un utilisateur n'ayant pas une bonne connexion prendrait un temps beaucoup plus long dans ce cas. La bibliothèque serait quand même chargée, même si des pages n'affichent pas d'animation Lottie.

Dans notre cas d'utilisation chez Indy, nous utilisons Lottie pour l'instant qu'à un seul endroit. Nous avons souhaité lazy loader la bibliothèque pour qu'elle ne soit chargée que quand l'utilisateur ouvre la page contenant l'animation. Dans sa navigation sur les autres pages, la bibliothèque n'est pas chargée.

Pour lazy loader lottie, nous avons créé un chunk contenant seulement la bibliothèque. La bibliothèque est en mode prefetch, c'est à dire qu'elle ne se charge que quand le navigateur est disponible pour effectuer le chargement.

Voici à quoi ressemble la méthode init() de notre composant LottieAnimation. Elle s’occupe de lazy loader la bibliothèque Lottie puis de configurer l’animation Lottie.

methods: {
  async init() {
    const lottie = await import(
      /* webpackChunkName: "lottie" */
      /* webpackMode: "lazy" */
      /* webpackPrefetch: true */
      'lottie-web'
    );
    this.lottieAnimation = lottie.loadAnimation({
      container: this.$refs.animationContainer,
      renderer: 'svg',
      loop: this.loopAnimation,
      autoplay: this.autoPlayAnimation,
      path: this.lottieJsonPath,
      rendererSettings: this.rendererSettings,
    });
  },
},

⚠️ La référence au container dans la méthode loadAnimation ne doit pas pointer sur un élément HTML contenant des directives Vue telles que v-if. Autrement, le mapping ne peut pas se faire.

Code complet du composant LottieAnimation 👨🏽‍💻

<template>
  <div ref="animationContainer" />
</template>

<script>
export default {
  name: "LottieAnimation",
  props: {
    lottieJsonPath: {
      // the JSON path linked to the animation
      type: String,
      required: true,
    },
    loopAnimation: {
      // Do we want the animation to loop ?
      type: Boolean,
      required: false,
      default: true,
    },
    autoPlayAnimation: {
      // Do we want to play the animation on initialization ?
      type: Boolean,
      required: false,
      default: true,
    },
  },
  data: () => ({
    rendererSettings: {
      scaleMode: "centerCrop",
      clearCanvas: true,
      progressiveLoad: false,
      hideOnTransparent: true,
    },
    lottieAnimation: undefined,
  }),
  async mounted() {
    await this.init();
  },
  beforeDestroy() {
    this.lottieAnimation?.destroy();
  },
  methods: {
    async init() {
      const lottie = await import(
        /* webpackChunkName: "lottie" */
        /* webpackMode: "lazy" */
        /* webpackPrefetch: true */
        "lottie-web"
      );
      this.lottieAnimation = lottie.loadAnimation({
        container: this.$refs.animationContainer,
        renderer: "svg",
        loop: this.loopAnimation,
        autoplay: this.autoPlayAnimation,
        path: this.lottieJsonPath,
        rendererSettings: this.rendererSettings,
      });
    },
  },
};
</script>