Animation Lottie
Affichez n'importe quelle animation Lottie dans votre application. Créez des marqueurs, interagissez et synchronisez votre animation avec les autres composants (défilement, mouvement...).
Développée par les équipes Airbnb, Lottie est une librairie open source iOS, Android et React Native qui génère les animations en temps réel, ce qui permet aux applications d’utiliser des animations aussi facilement qu’elles utilisent des images statiques. Ces animations SVG sont plus fluides, plus légères et offrent plus de contrôle.
Pour en savoir plus : Lottie (Bodymovin) : des animations plus fluides pour votre application
Trouver une animation Lottie
Le site de Lottie regroupe de très nombreuses animations que vous pouvez utiliser et personnaliser.
Sélectionnez votre animation sur le site de Lottie
Pour télécharger une animation Lottie :
- Rendez-vous sur lottiefiles.com et sélectionnez votre animation.
- Pour afficher une animation Lottie dans PandaSuite, vous avez besoin du fichier JSON.
- Cliquez sur le bouton Download et sélectionnez Lottie JSON.
- Une fois ce fichier téléchargé, compressez-le au format ZIP
💡 Si vous souhaitez uniquement afficher l'animation en utilisant une connexion Internet, vous pouvez utiliser l'URL de l'animation dans un composant Web. Utilisez l'URL au sein du bloc iFrame code.
Exporter votre animation Lottie depuis After Effects
Pour exporter avec le plugin Bodymovin :
- Téléchargez le plug-in Bodymovin.
- Ouvrez votre projet dans After Effects.
- Rendez-vous dans Fenêtres > Extensions et ouvrez le plug-in Bodymovin.
- Sélectionnez la composition que vous souhaitez exporter et choisissez un dossier de destination.
- Cliquez sur le bouton Render pour voir le rendu de la composition et prévisualisez votre animation.
- Rendez-vous dans le dossier de destination et retrouvez votre animation au format JSON. Si vous aviez des images, vous avez également un dossier Images
- Sélectionnez tous les fichiers à la racine et compressez au format ZIP.
Afficher dans votre application
- Cliquez sur Composants et insérez le composant Animation Lottie.
- Comme Source, sélectionnez le fichier ZIP de votre animation.
- Indiquez le nom du fichier JSON (par exemple 43792-yoga-se-hi-hoga.json)
- Double-cliquez sur le composant pour l'afficher
Le composant Animation Lottie
Vous pouvez jouer l'animation depuis la fenêtre d'édition.
Personnalisez l'animation avec les propriétés suivantes : En boucle, Vitesse (min/max) et Lecture automatique.
Ajouter des marqueurs
- Double-cliquez sur le composant
- Dans la fenêtre d'édition de votre marqueur, cliquez sur le bouton +
- Jouez votre animation et arrêtez-la sur la frame de votre choix.
Créez des marqueurs depuis la fenêtre édition
Déclencher une action à partir de votre animation Lottie
- Fin de lecture
- Mise en pause
- Commence lecture
- Arrêt lecture

Les déclencheurs du composant Lottie Animation
Créer une action sur votre animation
- Changer frame
- Augmenter/diminuer la vitesse
- Avancer/Reculer
- Mettre en pause
- Lecture
- Pause
- Redémarrer au début
- Mettre la vitesse
- Arrêter
- Aller à
Les actions du composant Animation Lottie
Synchroniser avec un autre composant
Pour synchroniser votre animation Lottie avec un autre composant (par exemple le capteur de mouvement), insérez le composant Synchronisation depuis Composants.
Dans la fenêtre Propriétés, cliquez sur Ajouter composant. Choisissez le composant Animation Lottie et l'autre composant dans la liste. Sélectionnez le composant Animation Lottie et cliquez sur Frames dans les options.