Utilisation des fichiers Lottie dans les projets web-based

Les animations sont très importantes dans des projets de qualité. La précision de celles-ci est souvent cruciale. Des membres de l'équipe sont parfois dédiés à leur réalisation (motion designers) et, en tant que développeurs ou intégrateurs, reproduire approximativement leurs intentions en code ne suffit pas.

Un des outils les plus populaires pour réaliser des animations de haute qualité est encore à ce jour Adobe After Effects. Par contre, le format d'exportation de ce type de logiciel se limite à la séquence d'images, ou au fichier vidéo : deux formats qui se conjuguent mal avec le web pour les raisons suivantes :

• Fichiers volumineux et téléchargements longs.
• Délais de chargement dans la lecture non linéaire (seeking).
• Résolution limitée et floue lorsqu'agrandi (bitmap).

Entrent en jeu les fichiers Lottie.

Qu'est-ce qu'une animation Lottie

Il s'agit d'un format de fichier JSON (.json) qui inclut les composantes et les directives d'une animation, plutôt que de fournir le rendu final. Les données incluent :

• Formes (svg)
• Images (base64)
• Propriétés (position, échelle, rotation, etc.)
• Keyframes
• Interpolations
• Etc.

Les animations peuvent être exportées depuis une extension After Effects (à l'origine appelée bodymovin). Mais, puisqu'il ne s'agit pas d'un rendu, une librairie agira à titre de lecteur et recomposera l'animation sur la plateforme de destination. Les librairies sont différentes d'une plateforme à l'autre (Android, iOS, Windows, Web), mais leur objectif reste le même : recomposer l'animation et générer les images (frames) en temps réel (realtime) à partir des données incluses dans le fichier JSON.

Historiquement, l'approche a été popularisée par Airbnb avec les modules Lottie for Web et bodymovin. Ces deux modules sont de moins en moins utilisés, en faveur de LottieFiles.

LottieFiles est une suite complète d'outils (incluant l'extension After Effects, les lecteurs pour différentes plateformes, des visualisateurs et éditeurs web) visant à moderniser l'approche. Il est compatible avec les fichiers JSON d'origine, tels qu'exportés par l'extension bodymovin. Et il introduit le nouveau format de fichier .lottie, ou dotlottie : un format binaire qui apporte les améliorations suivantes :

• Support des états (states) : permet par exemple de déclencher des animations spécifiques en réponse à des interactions spécifiques.
• Optimisations supplémentaires : les fichiers .lottie sont plus légers et plus rapides à charger.
• Inclusions des ressources dans un seul fichier : le fichier permet d'inclure les assets additionnels, tels que les polices de caractères et les images, dans un seul fichier. Cela réduit le nombre de requêtes nécessaires pour exécuter l'animation, tout en réduisant le poids des fichiers.

Comment créer un animation Lottie

Dans la plupart des cas, les animations seront crées avec l'une ou l'autre de ces 3 méthodes.

After Effect

En utilisant l'extension, on peut exporter une animation en fichier .lottie. Il faut toutefois avoir créé l'animation en gardant en tête les limites des fichiers Lottie :

• Éviter les filtres et effets.
• Garder les calques et les groupes en ordre.
• Privilégier les formes vectorielles au images bitmaps.
• Utiliser des formes vectorielles de qualité, qui utilisent des Béziers pour les courbes.
• Concevoir l'animation en gardant en tête qu'elle peut être redimensionnée et affichée sur différents types d'écrans et résolutions.

Créateur en ligne

Tout récemment, un éditeur en ligne très complet a aussi été lancé par l'équipe. Nommé tout simplement Lottie Creator, c'est un outil complètement web-based qui semble très complet. Il est possible d'y importer des SVGs et de les animer directement depuis un navigateur web.

Figma

Finalement, une extension pour Figma et permet de créer des animations en utilisant des presets ou des prototypes.

Comment intégrer une animation Lottie dans un projet web-based

L'intégration d'une animation Lottie est plutôt simple grâce aux librairies très efficaces qui existent pour chaque plateforme.

Pour l'intégration sur le web, le module @lottiefiles/dotlottie-web est préférable, comme il est rétrocompatible avec les fichiers Lottie JSON de première génération (bodymovin). De plus, le développement est encore très actif, et certaines intégrations plus précises (comme avec react) sont disponibles.

L'intégration de base se résume à :

import {DotLottie} from "@lottiefiles/dotlottie-web"

const lottie = new DotLottie({
  canvas: $("#my-canvas),
  loop: true,
  autoplay: true,
  renderConfig: {devicePixelRatio: 1},
  src: "animations/my_animation_1.json",
});

Il est aussi possible d'attendre le chargement de l'animation pour exécuter certaines tâches, par exemple l'affichage d'un élément où le chargement de l'animation est crucial :

lottie.addEventListener("load", () => {
  console.log("Animation ready. Show element as required here.")
})

Astuce 1 - Utiliser le lecteur en ligne officiel

Le lecteur en ligne Lottie Preview est un outil central pour moi. Il s'agit d'un point de rencontre idéale entre les membres de l'équipe. Il permet aux motion designers de tester leurs fichiers indépendamment du travail du programmeur ou de l'intégrateur.

Il suffit d'y télécharger un fichier Lottie (.lottie ou .json) pour pouvoir le visualiser dans un navigateur web. On peut aussi redimensionner la fenêtre pour tester le rendu dans différentes résolutions. C'est très pratique puisque certaines animations peuvent être plus saccadées lorsqu'elles sont utilisées à des résolutions plus hautes, tout dépendant de la complexité des formes et des animations.

Astuce 2 - Gestion du chargement

Si on souhaite déclencher manuellement la lecture d'une animation (plutôt que d'utiliser le paramètre d'initialisation autoplay), il est essentiel de s'assurer que le fichier soit loaded avant d'utiliser des commandes de lecture (tel que play()).

Alternativement, il serait possible d'utiliser une stratégie de preloading qui s'assure que tous les éléments nécessaires à l'application (incluant les animations Lottie) sont complètement chargés avant de démarrer l'application.

Astuce 3 - Hébergement indépendant de la librairie

Le module @lottiefiles/dotlottie-web va aussi charger un fichier WebAssembly (.wasm) : un fichier binaire qui est très optimisé et qui permet de traiter les fichiers Lottie plus rapidement et efficacement. Par défaut, un fichier externe sera chargé à partir d'un CDN.

Bien que cela permette de limiter la charge sur le serveur web, cela apporte aussi certains enjeux :

• Dépendance à Internet
• Dépendance à un service tiers sur lequel nous n'avons pas de contrôle.
• Peut contrevenir à la politique de gestion des données personnelles puisque le service externe peut collecter des données.

La dépendance à Internet peut être un enjeu pour des applications de type standalone (Electron). La connexion à Internet n'est pas toujours garantie, et l'application doit être le plus stable possible. On doit donc retirer cette dépendance.

Pour héberger soi-même le fichier WebAssembly (.wasm), on utilise la fonction statiqueDotLottie.setWasmUrl :

DotLottie.setWasmUrl("js/libs/dotlottie-player.wasm");

Il faut aussi s'assurer que le serveur web soit adéquatement configuré pour transmettre des fichiers .wasm. Par exemple, sur MAMP, il faut ajouter la ligne suivante dans le fichier conf/apache/mime.types :

application/wasm      wasm

Limitations

Charge sur le processeur (CPU)

Les animations Lottie apportent de nombreux avantages et bénéfices. Mais leur nature "non-rendue" a aussi d'importante conséquence. Le rendu s'opère en temps réel et à toute les fois que l'animation est affichée. La charge est donc plus importante sur le CPU de l'appareil où est affichée l'animation.

Fluidité à haute résolution

L'utilisation de SVGs est exigeante pour des rendus en haute résolution (ou sur des écrans haute densité de style Retina). Conséquemment, sur des ordinateurs moins puissants, l'animation produite est souvent à des framerates bas. Lottie est surtout idéal pour les plus petites résolutions.