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.

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

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.

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.