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>

Laisser un commentaire