Lottie by Airbnb

Nous avons découvert Lottie le mois dernier et nous voulons l'utiliser partout!

C'est pourquoi nous voulons partager cette expérience.

lottie

Introduction

Qu'est-ce que Lottie?

Lottie est une bibliothèque iOS, Android et React Native qui rend les animations After Effects en temps réel, permettant aux applications d'utiliser des animations aussi facilement qu'elles utilisent des images statiques.

Lottie a également une bibliothèque pour les applications Web : lottie-web.

Pourquoi Lottie?

Lottie vous permet d'utiliser vos fonctionnalités after effect préférées pour générer de très petits fichiers JSON. Ces fichiers JSON peuvent être lus sur IOS, Android, React Native et JavaScript vers l'avant ou vers l'arrière, et également répondre aux événements.

Comment ça marche?

Démonstration Web

Importer Lottie Web sur npm:

> npm install lottie-web

Obtenez le script de la bibliothèque:

<script src="node_modules/lottie-web/build/player/lottie.js" type="text/javascript"></script>

Utiliser le composant:

<div id="lottie-element"></div>

Lier l'animation:

lottie.loadAnimation({
  container: document.getElementById('lottie-element'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'https://res.cloudinary.com/placeme/raw/upload/v1556665648/lottie/profiles.json'
});

Profitez du résultat: lottie

See it in action with Angular and ng-lottie on our home page

Documentation

Fichiers communautaires

Vous pouvez trouver les fichiers de la communauté ici et soumettre les vôtres : https://lottiefiles.com

Édition des layers en ligne

L'édition des layers vous permet de mettre à jour les couleurs des animations existantes : https://editor.lottiefiles.com

Démonstration avec l'animation de chargement fondée ici. Les couleurs peuvent être mises à jour en ligne avant de télécharger le fichier d'animation JSON sur https://editor.lottiefiles.com.

Un exemple avec le thème PlaceMe loading bar: