Le composant 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 : des animations plus fluides pour votre application

Créer 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.

Vous pouvez également exporter une animation réalisée dans After Effects ou Figma grâce aux plugins After Effects ou Figma.

Intégrer dans votre projet

Pour insérer votre animation Lottie 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.

Par défaut, l'animation s'appuie sur la web view, ce qui permet une plus grande compatibilité. Vous pouvez choisir d'utiliser la version native iOS et/ou Android pour une meilleure performance, mais attention à la compatibilité des appareils.

Ajouter des marqueurs

Vous pouvez identifier une ou plusieurs frames de votre animation qui vont vous servir de déclencheur ou d'objet d'une action.

Pour ajouter un marqueur sur votre animation Lottie :

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

Vous pouvez changer le nom de votre marqueur, modifier manuellement la frame.

Ce marqueur apparaît ensuite dans la liste des déclencheurs et des actions de votre animation Lottie.

Déclencher une action à partir de votre animation Lottie

Sélectionnez votre composant et ajoutez une nouvelle action.

Voici les déclencheurs disponibles :

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

Choisissez un objet, le déclencheur et l'action Agir sur un composant.

Voici les actions disponibles :

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.