Animer avec Lottie

L'animation Web est non seulement très intéressante, mais améliore également efficacement la participation des utilisateurs et convertit les visiteurs en clients. Pensez au bouton "Like" de Twitter: lorsque vous cliquez pour aimer, les bulles colorées se diffusent autour du bouton en forme de cœur, et le bouton devient progressivement un cercle, et enfin l'état de remplissage rouge après le jeu est affiché. Si vous remplissez simplement le contour de la forme du cœur, l'effet sera bien pire. Ce sentiment d'excitation et de satisfaction illustre parfaitement comment l'animation peut améliorer l'expérience utilisateur.

Cet article présentera comment utiliser Lottie pour rendre les animations Adobe After Effects sur les pages Web pour réaliser des effets d'animation complexes tels que les boutons Twitter comme Twitter.

BodyMovin est un plug-in pour Adobe After Effects qui exporte des animations au format JSON; Lottie est une bibliothèque qui peut rendre ces animations JSON nativement sur les pages mobiles et Web. Il a été créé par Hernan Torrisi. Si vous pensez: "Je n'utilise pas les effets après les effets, ce message n'est peut-être pas pour moi", veuillez attendre un instant. Je n'utilise pas non plus After Effects, mais j'ai utilisé Lottie dans mon projet.

Bien sûr, vous n'avez pas à utiliser Lottie pour faire des animations sur les pages Web. Une autre approche consiste à concevoir des animations à partir de zéro, mais cela peut prendre beaucoup de temps, en particulier pour les types d'animations complexes auxquels Lottie est bon à gérer. Une autre option consiste à utiliser des animations GIF, qui ont des types d'animations illimitées, mais leur taille de fichier est généralement deux fois plus importante que le fichier JSON généré par BodyMovin.

Commençons à comprendre comment cela fonctionne.

Obtenez le fichier JSON

Pour utiliser Lottie, nous avons besoin d'un fichier JSON qui contient l'animation After Effects. Heureusement, Icons8 propose de nombreuses icônes animées gratuites disponibles dans les formats JSON, GIF et After Effects.

Ajouter un script à HTML

Nous devons également introduire la bibliothèque JavaScript du lecteur BodyMovin dans HTML et appeler sa méthode loadAnimation() . La méthode de base est la suivante:

<div id="icon-container"></div>
<script>
  var animation = bodymovin.loadAnimation({
    container: document.getElementById('icon-container'), // 必需
    path: 'data.json', // 必需
    renderer: 'svg', // 必需
    loop: true, // 可选
    autoplay: true, // 可选
    name: "Demo Animation", // 可选
  });
</script>

Animation d'activation

Une fois l'animation chargée dans le conteneur, nous pouvons utiliser l'écouteur d'événements pour configurer la méthode d'activation et déclencher l'action de l'animation. Voici les propriétés disponibles:

• container : chargez l'élément DOM de l'animation
• path : le chemin relatif vers le fichier JSON contenant l'animation
• renderer : format d'animation, y compris SVG, toile et HTML
• loop : valeur booléenne, spécifiez si l'animation est lue Loop
• autoplay : valeur booléenne, spécifiez si l'animation sera automatiquement jouer après le chargement
• name : nom d'animation, utilisé pour les références futures

Notez que dans l'exemple précédent, animationData a été commentée. Il s'exclut mutuellement à path et est un objet contenant les données d'animation exportées.

Essayer un exemple

Je veux montrer comment utiliser Lottie avec cette icône de contrôle de jeu / pause d'animation à partir d'Icons8:

La bibliothèque de joueurs de BodyMovin est hébergée statiquement ici et peut être placée directement dans HTML, mais peut également être utilisée comme package:

 NPM Installer Lottie-Web ### ou Yarn Ajouter Lottie-Web

Ensuite, dans votre fichier HTML, incluez les scripts du dossier DIST du package installé. Vous pouvez également importer la bibliothèque depuis Skypack en tant que module:

 Importez LotTieweb à partir de "https://cdn.skypack.dev/lottie-web";

Actuellement, notre bouton PAUSE est dans la lecture en boucle et joue automatiquement:

Changeons-le pour que l'animation soit déclenchée par l'action.

Animation de déclenchement

Si AutoPlay est désactivée, nous obtiendrons une icône de pause statique car c'est ainsi qu'il exporte des after effets.

Mais ne t'inquiète pas! Lottie fournit certaines méthodes qui peuvent être appliquées aux instances d'animation. C'est-à-dire que la documentation du package NPM est plus complète.

Nous devons faire quelques choses:

• Initialement affiché en tant que statut "Play".
• Définissez son animation sur "pause" lorsque vous cliquez sur
• Ensuite, changez l'animation entre les deux lorsque vous cliquez sur.

goToAndStop(value, isFrame) est très appropriée ici. Lorsque l'animation est chargée dans le conteneur, cette méthode définit l'animation pour accéder à la valeur fournie, puis s'arrête là. Dans ce cas, nous devons trouver la valeur de l'animation lorsqu'il est joué et le définir. Le deuxième paramètre spécifie si la valeur fournie est basée sur le temps ou le cadre. Il s'agit d'un type booléen avec une valeur par défaut de false (c'est-à-dire une valeur basée sur le temps). Puisque nous voulons définir l'animation pour lire le cadre, nous le définissons sur true.

Définit l'animation sur un point spécifique sur la chronologie en fonction de la chronologie en fonction de la valeur. Par exemple, la valeur temporelle au début de l'animation (en pause) est 1. Cependant, l'animation est définie sur une valeur de trame spécifique en fonction de la valeur du cadre. Selon Techterms, un cadre est une seule image dans une séquence d'image. Donc, si je définis la valeur du cadre de l'animation sur 5, l'animation ira au cinquième trame de l'animation (dans ce cas "séquence d'image").

Après avoir essayé différentes valeurs, j'ai constaté que l'animation joue des valeurs de trame 11 à 16. J'ai donc choisi 14 pour être en sécurité.

Maintenant, nous devons animer afin qu'il change pour faire une pause lorsque l'utilisateur clique et joue lorsque l'utilisateur clique à nouveau. Ensuite, nous avons besoin playSegments(segments, forceFlag) . segments est un type de tableau contenant deux nombres. Les premier et deuxième nombres représentent les premiers et derniers images que la méthode doit lire, respectivement. forceFlag est une valeur booléenne indiquant si la méthode doit être déclenchée immédiatement. S'il est défini sur FAUX, il attendra que l'animation se joue à la valeur spécifiée comme la première trame dans le tableau segments . Si c'est vrai, le clip sera lue immédiatement.

Ici, j'ai créé un drapeau pour indiquer quand lire le clip de Play to Pause, et le clip de Pause à Play. J'ai également défini forceFlag sur true parce que je veux que la conversion soit effectuée immédiatement.

C'est ça! Nous rendons des animations des After Effects dans le navigateur! Merci Lottie!

Toile?

Je préfère utiliser SVG comme rendu car il prend en charge la mise à l'échelle, ce qui, je pense, peut rendre l'animation la plus claire. Le rendu de la toile n'est pas très bon et ne prend pas en charge la mise à l'échelle. Cependant, si vous souhaitez rendre des animations avec une toile existante, vous devez effectuer des opérations supplémentaires.

Plus d'opérations

Il existe également des événements dans les instances d'animation qui peuvent également être utilisés pour configurer le comportement des animations.

Par exemple, dans le stylo ci-dessous, j'ai ajouté deux auditeurs d'événements dans l'animation et j'ai défini du texte pour s'afficher lorsque l'événement est déclenché.

Tous les événements peuvent être trouvés dans la documentation du package NPM. Avec tout cela, permettez-moi de dire autre chose, rendons des animations incroyables!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!