Qu’est-ce qu’une animation Lottie ?

Qu’est-ce que l’animation Lottie ?

 

La création d’animation complexes en motion design pour Android, iOS… est, bien sûr, un long processus. C’est même en tant que designer ou animateur, parfois un processus de casse-tête. 

Vous devez soit télécharger de gros fichiers image pour chaque taille d’écran, soit écrire un millier de lignes de code fragile et difficile à maintenir. Par conséquent, bien qu’il s’agisse d’un outil puissant pour communiquer des idées et produire des expériences utilisateur convaincantes, la plupart des applications n’utilisent pas d’animation vidéo.

Il n’a pas besoin d’être comme ça ! Ces problèmes ont disparu depuis longtemps et il existe de nombreux formats de fichiers, plateformes, etc. pratiques que vous pouvez exploiter pour simplifier votre flux de travail. Un tel format est Lottie. 

Dans ce blog, je vais vous parler de ce format intéressant et pratique.

 

animation ux

Qu’est-ce que Lottie ?

Dans les années précédant Lottie, les motion designers créaient leurs animations et les envoyaient ensuite aux développeurs de logiciels pour les mettre en action. Les options de mise en œuvre étaient inadéquates et de portée limitée.

Il était courant pour les développeurs d’exporter des animations dans des formats de faible qualité. Mais aussi d’essayer de recréer la conception de l’animation en code à partir de zéro au mieux de leurs capacités. Sans surprise, ce n’était pas la technique la plus efficace et entraînait souvent des animations inefficaces et complètement différentes de la sortie prévue par le concepteur de mouvement.

 

Hernan Torrisi

 

Hernan Torrisi a proposé l’idée d’exporter la représentation d’une animation créée dans Adobe After Effects et de générer l’animation au moment de l’exécution en 2015. Les capacités de script d’After Effects ont été utilisées pour itérer un projet d’animation, et un plugin pour Adobe After Effects appelé Bodymovin a été développé pour produire une description de l’animation au format JSON.

En plus du lecteur pour le navigateur, il a fourni le tout premier moteur de rendu pour le format. Il a été construit à l’aide de Javascript.

Depuis son introduction en 2017, LottieFiles a fourni aux animateurs et aux développeurs une plateforme pour tester, partager et exposer rapidement leurs animations sur le Web. Le format de fichier basé sur l’animation Lottie (JSON) permet aux concepteurs de transférer sans effort des animations d’une plateforme à l’autre. 

 

Lottie a été nommé d’après Charlotte ‘Lotte’ Reiniger. Une réalisatrice allemande largement considérée comme la pionnière mondiale de l’animation de silhouettes. Il n’y a aucune limitation sur les plateformes qu’elle prend en charge. Elle est accessible via iOS, Android et le Web.

Une combinaison de composants vectoriels et raster est utilisée dans Lottie pour créer une animation de haute qualité multiplateforme par nature. Visant certains éléments et paramètres d’animation, il offre la possibilité d’ajouter de l’interactivité et de modifier les paramètres pendant l’exécution.

Ce sont de petits fichiers qui peuvent être utilisés sur n’importe quel appareil et qui peuvent être mis à l’échelle sans perte de qualité. Les fichiers Lottie peuvent être réutilisés par les développeurs dans leur programmation. 

 

Que peut faire un Lottie ?

 

Lottie permet à votre animation de jouer sur n’importe quel appareil Web ou mobile en haute qualité, et avec des paramètres intelligents, vous rendez votre animation plus attrayante.

Une chose à garder à l’esprit est que lors de la création pour Lottie, les fichiers JSON doivent être aussi petits que possible pour la plateforme mobile. Utilisez des techniques parentales autant que possible. 

Un code supplémentaire est ajouté lors de la duplication des mêmes images clés sur un calque similaire. Vous devez utiliser des animations d’images clés de chemin dans la mesure du possible.

La majeure partie de l’espace est consommée en ajoutant des données pour chaque sommet sur chaque image clé. 

La trace automatique ou la technique wiggler vous donne une image clé pour chaque image. Cependant rendre votre fichier JSON très lourd peut avoir un impact négatif sur les performances. Ils doivent être équilibrés avec la composition pour fonctionner en douceur et efficacement.

 

Où pouvez-vous utiliser Lottie ?

 

animation lottie

 

Selon le développeur, Lottie est accessible depuis pratiquement n’importe quelle plateforme. Cela comprend le Web et les appareils mobiles. En d’autres termes, ils peuvent être facilement intégrés à la fois aux applications mobiles et aux applications Web.

Sur certains services de messagerie, les animations Lottie peuvent même être utilisées comme autocollants. Il n’est pas limité au Web ou aux appareils mobiles en termes de limitations techniques. Sur les applications de bureau ainsi que sur certaines smartwatches, vous pourriez en profiter.

Divers plugins et bibliothèques multiplateformes sont disponibles pour Web, iOS, Android, Flutter, React, Vue, Angular et Sketch. Figma, After Effects et bien d’autres sont pris en charge dans les fichiers d’animation Lottie. 

 

Pourquoi utiliser l’animation Lottie ?

 

Il est naturel de penser pourquoi vous devriez utiliser l’animation Lottie alors qu’il y a tant d’autres options disponibles.

Voici pourquoi :

 

Lottie peut être joué n’importe où 

 

Le lecteur Web Lottie est compatible avec tout navigateur prenant en charge Javascript contemporain. Ce qui signifie, que Lottie peut être joué sur n’importe quel navigateur moderne prenant en charge Javascript. De plus, comme les kits de développement de logiciels les plus récents offrent un contenu Web dynamique, l’intégration de Lottie dans n’importe quel programme de bureau ou portable devient plus simple.

Il existe également des bibliothèques disponibles pour implémenter la lecture de Lottie sur les plateformes IOS, Android et Tizen, ce qui permet d’utiliser Lottie dans des applications mobiles sur la grande majorité des smartphones et des tablettes. Les animations Lottie sont rapidement adoptées par les grandes entreprises pour améliorer leurs frontaux mobiles, tandis que les startups utilisent Lottie dans leurs conceptions de produits pour se démarquer de la concurrence.

 

Facile à maintenir

 

Les animations Lottie sont enregistrées en texte brut. Ce qui signifie qu’elles sont visibles par les êtres humains. Par conséquent, l’utilisation de Lottie dans le développement d’interfaces d’application réduit le temps de débogage ainsi que le temps total de déploiement. De plus, les fichiers Lottie en texte brut sont moins compliqués à maintenir et à affiner. Car, ils ne nécessitent pas l’utilisation d’outils logiciels spécialisés.

Les données textuelles des animations Lottie sont structurées en JSON, ce qui signifie qu’elles sont prêtes à être assimilées à Javascript ou à tout autre environnement de développement d’applications qui accepte JSON sans nécessiter d’analyse ou de traitement supplémentaire. En conséquence, Lottie est devenu le format graphique animé le plus utilisé et le plus portable au monde.

 

C’est dynamique

 

La structure JSON des données Lottie permet une manipulation et un remplacement faciles de son contenu à de nombreux degrés de granularité, allant des valeurs fractionnaires à de grandes portions d’objets. Le matériel de remplacement, en outre, peut être chargé dynamiquement à partir de n’importe quel site. En conséquence, Lottie est actuellement le format graphique animé le plus dynamique et le plus largement utilisé.

 

Évolutivité

 

Parce que les visuels conventionnels sont volumineux, de nombreuses entreprises les utilisent avec parcimonie dans les interfaces utilisateur des applications. Trop de graphiques peuvent augmenter les coûts de stockage et de récupération, en particulier lors de la recherche et du tri de données contextuelles.

Lorsqu’ils sont utilisés dans de grandes solutions, les fichiers Lottie peuvent minimiser les dépenses de stockage et de tri/recherche contextuelle. Comme les Lotties sont dynamiques, les applications n’ont besoin de charger que les composants qui doivent être mis à jour à un moment donné.

 

La plus grande qualité

 

Elle utilise des vecteurs pour représenter les dimensions des formes géométriques, ainsi que des qualificateurs pour définir leurs caractéristiques et la façon dont ils continuent de se déplacer pendant l’animation. Le lecteur Lottie s’affiche à la résolution native de l’écran. Cela garantit que les animations motion design Lottie sont toujours affichées dans la meilleure qualité possible.

Un utilisateur zoome sur une animation Lottie et le joueur la redessine à la résolution native. Cela signifie que les animations Lottie ne se pixellisent jamais, quelle que soit leur grossissement.

 

Conclusion

 

Des interfaces utilisateur rapides, dynamiques et élégantes peuvent être obtenues en utilisant les Lotties. La consommation de bande passante de votre client serait considérablement réduite en raison des besoins de stockage inférieurs pour le composant hébergé de votre application.

Chez Wapiyeah, nos animateurs et graphistes sont qualifiés et réalisent d’excellentes vidéos. Contactez-nous pour en savoir plus.