Article original : How to Use the Lottie Library like a Pro – Lottie Resources for Designers and Developers

Par Idorenyin Udoh

Lottie est une bibliothèque qui permet de restituer nativement les animations Adobe After Effects sur mobile et sur le web. J'aime utiliser Lottie pour les animations dans mes projets car :

  • Créer une animation à partir de zéro peut prendre beaucoup de temps, et
  • Les fichiers GIF peuvent être deux fois plus volumineux que les fichiers JSON Lottie (les fichiers contenant l'animation Lottie)

Si vous utilisez fréquemment Lottie dans vos projets, vous avez probablement ressenti le stress de :

  • trouver une animation Lottie appropriée (si vous ne connaissez pas Adobe After Effects)
  • savoir à quoi ressemble l'animation complète
  • la modifier selon votre style préféré, et
  • l'implémenter sur le web ou sur mobile.

L'objectif de cet article est de booster votre productivité en tant que designer et développeur Lottie en vous fournissant des ressources Lottie efficaces. J'essaierai d'inclure un maximum de ressources Lottie pour être aussi utile que possible. Sans mauvais jeu de mots.

Ressources pour obtenir des animations Lottie

Après avoir créé votre animation dans Adobe After Effects, vous pouvez l'exporter au format JSON Lottie en utilisant l'extension bodymovin.

Si vous ne connaissez pas Adobe AE, vous pouvez obtenir des animations Lottie à plusieurs endroits. Voyons quelques options ici.

Drawer

Drawer propose des animations Lottie gratuites et payantes dans divers formats tels que JSON, SVG et PNG, ainsi que des fichiers Adobe AE, XD et Illustrator.

Une fois que vous avez sélectionné votre pack d'animations préféré, vous pouvez continuer avec le format que vous souhaitez utiliser, de préférence le format JSON Lottie.

Image Capture d'écran de la page 'Coronavirus Icons' de Drawer

LottieFiles

LottieFiles propose également des animations Lottie gratuites et payantes. Il existe des packs et des icônes individuelles, mais contrairement à Drawer, LottieFiles fournit exclusivement des fichiers JSON pour les animations Lottie.

Image Capture d'écran de l'animation d'un adolescent qui marche sur LottieFiles

Icons8

Icons8 propose des icônes animées individuelles ainsi que des packs d'icônes animées associées. Ils fournissent des liens vers les fichiers JSON Lottie des animations hébergés statiquement, que vous pouvez soit télécharger, soit utiliser tels quels dans votre implémentation.

Image Capture d'écran de la page de l'icône animée 'pause' d'Icons8

Lordicon

Lordicon est un site web qui propose des animations que vous pouvez personnaliser avant de les utiliser. Vous pouvez modifier des caractéristiques telles que la couleur et l'épaisseur, puis télécharger les animations dans votre format préféré.

En plus du format JSON, ils proposent également des animations en HTML, GIF, AEP, PNG, EPS et SVG.

Image Capture d'écran de la page des icônes de Lordicon

Comment prévisualiser les animations Lottie

Après avoir obtenu votre animation Lottie sur l'un des sites listés ci-dessus, vous voudrez peut-être voir toutes les images (frames) de l'animation. C'est-à-dire que vous voudrez regarder l'animation se dérouler du début à la fin.

Bien que cela soit généralement affiché sur les sites où vous obtenez l'animation, je vous recommande de vérifier le contenu du fichier que vous téléchargez pour confirmer qu'il correspond bien à ce que vous pensez télécharger.

Image Capture d'écran de la page Drawer Preview

Pour ce faire, vous pourriez l'implémenter directement sur le web ou sur mobile – mais cela prendrait trop de temps.

Au lieu de cela, il existe des ressources comme Drawer Preview et LottieFiles Preview qui vous permettent de voir ce qu'il y a dans un fichier JSON Lottie. Tout ce que vous avez à faire est de glisser-déposer le fichier dans la zone prévue à cet effet. Une fois le fichier déposé, l'animation se joue automatiquement et tourne en boucle.

Image Capture d'écran de la page LottieFiles Preview

Comment modifier les animations Lottie

Vous pourriez vouloir ajuster une ou deux choses dans votre animation. Comme vous ne l'avez pas créée vous-même sur Adobe AE, vous pourriez penser qu'il est impossible de la modifier. Mais ce n'est pas tout à fait vrai.

Avec LottieFiles Editor, vous pouvez voir la largeur et la hauteur de l'animation, la fréquence d'images (frame rate), le nombre d'images, la durée, la vitesse de lecture et tous les calques présents dans l'animation.

À l'exception du nombre d'images, vous pouvez modifier toutes ces caractéristiques selon vos préférences. Lorsque vous avez terminé, vous pouvez partager le brouillon avec quelqu'un, exporter un calque particulier ou l'intégralité de l'animation Lottie, ou l'exporter en tant qu'autocollant Telegram après avoir respecté les spécifications requises.

Image Capture d'écran de la page LottieFiles Editor

Comment implémenter les animations Lottie

C'est ici que vous utilisez réellement l'animation après l'avoir inspectée et avoir effectué les modifications souhaitées.

Vous pouvez implémenter l'animation nativement sur le web, sur mobile ou sur des CMS. Il existe de nombreux tutoriels qui vous montrent comment faire, mais je vais vous proposer ici quelques ressources complètes.

Comment implémenter Lottie sur le Web

Comment implémenter Lottie sur Mobile

Comment implémenter Lottie sur des CMS

Documentation et bibliothèques Lottie

En plus des outils listés ci-dessus, lors de l'implémentation d'animations Lottie, il n'y a pas de meilleur point de départ que la documentation Lottie. Si vous êtes plus à l'aise avec le package npm, voici également la documentation du package.

De plus, les bibliothèques Lottie pour diverses plateformes sont disponibles sur GitHub :

Avec toutes ces ressources, j'espère vraiment que vous ne serez pas perdu pour tout ce qui concerne Lottie.

Merci de votre lecture et bonne animation !