Aperçu rapide

Le widget Lottie vous permet d'ajouter des animations légères et évolutives aux ShoutOuts de mise en page dynamique à l'aide de fichiers Lottie JSON. Les animations Lottie se chargent rapidement, se redimensionnent sans pixelisation et aident à améliorer l'engagement visuel sans affecter les performances.

Cet article explique comment ajouter une animation Lottie à un ShoutOut, la modifier et configurer les paramètres de lecture.

Comment ça marche

Les animations Lottie sont des fichiers basés sur JSON hébergés sur LottieFiles. Dans le concepteur visuel, vous ajoutez un widget Lottie et le liez à une animation JSON hébergée, qui est ensuite rendue directement dans le ShoutOut.

Seuls les liens JSON générés à partir de LottieFiles sont pris en charge dans le concepteur visuel.

Ajouter une animation Lottie

Pour ajouter une animation Lottie à un ShoutOut :

1. Dans le concepteur visuel, sélectionnez l'icône + dans le menu latéral
2. Sélectionnez Lottie et faites-le glisser vers le canevas
3. Sélectionnez Modifier l'animation pour ouvrir LottieFiles
   • Si vous n'avez pas de compte LottieFiles, créez-en un gratuitement
4. Dans LottieFiles, choisissez une animation et sélectionnez Générer un lien
5. Choisissez l'emplacement de téléchargement pour ajouter l'animation à vos projets
6. Copiez le lien de ressource JSON qui a été généré
7. Collez le lien JSON dans le champ Coller une URL dans le concepteur visuel

Configurer les paramètres de lecture

Vous pouvez contrôler la façon dont l'animation est jouée à partir du sac de propriétés.

Les options de lecture comprennent :

• Lire en boucle : activez-la pour lire en continu l'animation Lottie
• Vitesse de lecture : définissez la vitesse de lecture, telle que 1x, 1,5x ou 2x

Un aperçu de l'animation apparaît dans le concepteur visuel après l'ajout du lien.

Améliorez votre ShoutOut avec les animations Lottie

Modifier les animations Lottie

Pour modifier une animation Lottie :

• Ouvrez l'animation dans l'Éditeur Lottie

Notes techniques

• Le widget Lottie est disponible uniquement dans le concepteur visuel dynamique
• Seul le lien JSON généré dans LottieFiles fonctionne dans le Visual Designer

Resources

Pour en savoir plus sur les capacités de Lottie, reportez-vous aux ressources suivantes :

• Qu'est-ce qu'une animation Lottie ?
• Centre d'éducation Lottie
• FAQ Lottie et Centre d'Assistance