Mon avis sur les animations lottie pour Android

Bonjour, moi c’est Laurent (dit Lolo)

Dans le cadre d’un projet d’application, j’ai été amené à utiliser les animations Lottie.

Nous devions sur cette application, avoir des formes animées qui bougeaient de manière répétées sur le fond des différents écrans de l’application. Ces animations devaient être relativement petites en mémoire.
C’est là que Lottie entre en jeu.

Lottie est idéal pour les animations simples

Pour créer les animations il faut utiliser After Effects.
Comme décrit sur la page officielle d’Airbnb Design, Lottie est une bibliothèque native iOS, Android et React qui rend les animations After Effects en temps réel. Elle permet aux applications natives d’utiliser les animations aussi facilement qu’elles utilisent des ressources statiques.

Lottie utilise des données d’animation exportées sous forme de fichiers JSON à partir d’une extension open-source After Effects appelée Bodymovin.
Pour les animateurs After Effects, il y a des restrictions à respecter car le plugin ne gère pas l’ensemble des fonctions d’After Effects.
Le json sera exporté mais le résultat ne sera pas celui attendu dans le mobile.

A noter : il est possible de tester le json avec l’application fournit par Airbnb. Mais il ne faut pas se fier à la preview sur le web qui ne reflète pas la version mobile. En effet, ce n’est pas le même SDK.

Voici un exemple de rendu avec deux animations

Restrictions connues 

– Les expressions (lien entre animations) ne sont pas supportées par le plugin Bodymovin. Généralement, ce n’est pas un problème si vous créez des animations simples. Mais si les animations sont un peu plus complexes, cela devient assez difficile.

– Le texte n’est pas supporté, donc si vous exportez une animation qui contient du texte, le texte sera converti en formes. Afin d’avoir plus de contrôle sur l’exportation finale, je vous suggère de commencer par changer manuellement vos calques de texte en formes et seulement ensuite exporter l’animation au format JSON. De cette façon, vous saurez exactement à quoi ressemblera le texte exporté.

– La dernière chose mais non la moindre est que si vous avez l’opacité appliquée aux éléments individuels (à l’intérieur du groupe), pas les couches/groupes entiers. Cela peut affecter l’apparence des éléments qui se chevauchent lorsque l’opacité s’applique à l’ensemble du groupe ou du calque, ce qui entraîne la disparition de certains éléments dans l’exportation finale.

Lottie est flexible et facile à implémenter en code

Lottie est extrêmement facile et intuitif à implémenter en code :

– j’ajoute la traditionnelle implémentation gradle : implementation « com.airbnb.android:lottie:$lottieVersion »
– j’ajoute les différents fichiers json exportés du plugin dans le répertoire Assets (on peut aussi les téléchargés)
– je crée les vues Lottie avec l’objet : LottieAnimationView

Voici la déclaration de la vue XML
<com.airbnb.lottie.LottieAnimationView
android:id= »@+id/home_animation »
android:layout_width= »match_parent »
android:layout_height= »match_parent »
android:scaleType= »centerCrop »
app:lottie_rawRes= »@raw/onboarding »
app:lottie_loop= »true »
app:lottie_autoPlay= »true » />

L’objet LottieAnimationView permet de paramétrer l’animation mais pas de la changer.
En tant que développeur Lottie est certainement un gain de temps lorsque des animations plus complexes sont en jeu. Ceci même si certaines animations simples peuvent être faites manuellement.

L’avantage ultime de l’utilisation de Lottie est l’économie d’une énorme quantité d’espace. Le fait que le format JSON utilise beaucoup moins d’espace que les séquences PNG a un impact direct sur le temps de téléchargement et d’installation des applications.

J’ai pu lire dans d’autres articles sur le sujet que l’animation exportée en utilisant le plugin Lottie au format JSON prend moins de 5 % en mémoire par rapport à la même animation exportée comme une séquence PNG.

En conclusion, l’utilisation de Lottie s’est avéré être une bonne surprise. C’est simple et pratique à condition d’avoir des animations simples.
Attention toutefois a bien utiliser l’accélération matérielle.
Je le recommanderais certainement aux designers et aux développeurs.

Articles liés
Introduction à Volley et GSON
Les outils de l’UX/UI designer
Récupération de la signature d’un client dans une application
Utilisation de la fonction debug de Rubymine avec Docker

Laissez votre commentaire

Votre commentaire*

Votre Nom*
Votre site internet

3 × trois =