
30 avr. 2019
Nous avons découvert Lottie le mois dernier et nous voulons l'utiliser partout!
C'est pourquoi nous voulons partager cette expérience.
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:
Avant | Après |
---|---|
lottie | lottie |