Utilisez « Lottie » pour créer des animations incroyablement belles et dynamiques
Avez-vous rêvé de faire des animations stylées, personnalisées et dynamiques, sans ou peu de lignes de codes ? Si oui, nous vous présentons Lottie pour créer des animations belles, légères et qui amélioreront nettement la qualité du rendu, en terme de résolution ainsi qu’en expérience utilisateur. L’animation n’a jamais été aussi tendance qu’en 2021… Sans plus attendre, rentrons dans le vif du sujet.
Pour toutes celles et tous ceux qui se posent la question de ce mystérieux nom « Lottie » ? Sachez que Lottie doit son nom à Charlotte « Lotte » Reiniger, réalisatrice allemande et pionnière dans le domaine de l’animation de silhouettes. Bien, nous pouvons maintenant commencer.
Qu’est-ce que Lottie ?
Lottie est une technologie qui a été développée par la branche design de l’entreprise Airbnb depuis 2017. L’équipe a pensé « Lottie » pour offrir une expérience utilisateur des plus dynamiques et impliquantes.
D’un point de vue technique, Lottie est un format de fichier d’animation basé sur JSON qui permet aux concepteurs de téléverser des animations sur n’importe quelle plateforme aussi facilement que des actifs statiques. Il s’agit de petits fichiers qui fonctionnent sur n’importe quel appareil et qui peuvent être mis à l’échelle ou qui peuvent être réduits sans pixellisation. Pour faire simple, vous n’êtes pas obligé de créer de multiples lignes de codes pour faire bouger une animation, vous n’avez qu’à la télécharger et elle s’animera selon vos consignes.
Cette technologie est Open-source, c’est à dire que tout le monde peut y contribuer et peut l’utiliser librement. Elle est accessible pour le web sur iOS, Android, Windows, QT, Tizen et bien d’autres systèmes d’exploitation.
Systèmes d’exploitation et frameworks sur lesquels les animations fonctionnent © lottiefiles.com
De nombreuses entreprises utilisent Lottie pour leurs animations. Vous les retrouverez sur les applications et sites Internet de marques, telles que Nike, Uber ou encore Disney, Netflix, Amazon, Duolingo et Microsoft.
Lottie : du Design à l’intégration
Lottie est une technologie qui permet d’exporter facilement vos animations créées avec Adobe After Effects et ainsi de les intégrer à votre site. C’est une alternative au langage technique courant qu’est la CSS, Cascading Style Sheets, à condition de posséder, de maîtriser ou de travailler avec un professionnel qui œuvre sous Adobe After Effects.
Capture d’écran Plugin Bodymovin en libre téléchargement sur le cloud © Adobe Exchange
En effet, Lottie fonctionne avec le plugin « After Effects Bodymovin ». Cette extension permet d’exporter des animations au format html. Un sous-ensemble de fonctionnalités After Effects est pris en charge. Exportation vers html, svg ou canvas.
Concrètement les trois ingénieurs Brandon Withrow, Gabriel Peal et Leland Richardson, designers chez Airbnb, ont vu le potentiel des animations basées sur JSON et les solutions qu’elles apportaient aux problèmes rencontrés.
Ils se sont associés à l’animateur principal Salih Abdul-Karim d’Airbnb pour aider à construire des bibliothèques iOS et Android, capables de rendre ces fichiers d’animation JSON, qu’ils ont appelés « Lottie ».
Récemment un plugin plus simple a été créé pour exporter instantanément vos animations After Effects au format Lottie JSON. Il se nomme « LottieFiles for After Effects ».
Capture d’écran de l’extension LottieFiles for After Effects en libre téléchargement sur le cloud © Adobe Exchange
Notons que ce plugin applique toutes les fonctionnalités de génération de l’extension « Bodymovin ». Bien que « LottieFiles for After Effects » et « Bodymovin » exportent tous deux des animations au format JSON, le plugin dispose de quelques fonctionnalités supplémentaires qui simplifient davantage la pratique. Ces principales fonctionnalités sont :
- d’obtenir un aperçu instantané de son animation,
- d’exporter aux formats Lottie JSON et dotLottie,
- de tester son animation sur des supports de smartphones divers,
- de parcourir une bibliothèque gratuite de fichiers AEP d’animation sur LottieFiles
- et enfin de pouvoir télécharger son animation sur LottieFiles à partir du plugin
Définition de JSON
JSON, pour JavaScript Objet Notation, est un langage qui permet l’échange de données sous format textuel. Ce langage se génère et s’analyse rapidement sur les ordinateurs d’autant plus qu’il est pratique à écrire et à lire pour les développeurs. JSON permet de représenter des données structurées dont XML entre autre. Ce format texte est totalement indépendant de tout langage
Des outils mis à disposition par Lottie ?
Sur le site officiel Lottiefiles.com, tout ou presque tout, est proposé. Nous retrouvons des outils de conversion de fichiers évidemment, des forums de discussion entre passionnés, les dernières actualités et même une plateforme e-learning gratuite à disposition de toutes les personnes qui désirent approfondir le sujet.
Toutefois, ce qui fait la valeur ajoutée de ce site, c’est sa marketplace.
En effet, chaque créateur peut ainsi vendre ses animations à des clients en quête d’animations uniques et originales. Des packs d’icônes ou des personnages animés sont disponibles et peuvent ainsi donner des idées neuves à des créateurs de contenus, ou autres blogueurs de tous secteurs.
Animations disponibles sur la Marketplace © Lottiefiles.com
Une section « Free animations » (animations gratuites) est également disponible.
Un widget Lottie pour WordPress
Si vous utilisez le constructeur de page Elementor Pro vous êtes certainement familier avec Lottie. Pour celles et ceux qui désirent apporter de la valeur à leur site, un plugin gratuit existe sous réserve d’utiliser le plugin Elementor en version gratuite. Ce plugin s’appelle « Animentor – Lottie & Bodymovin for Elementor« , il est développé par overengineer.
A vous de jouer.
Source image mise en avant : © Lottie
