Catégories
Astuces et Design

Animation avec Lottie | Astuces CSS

Je pense que l'animation sur le Web est non seulement amusante, mais aussi engageante de telle sorte qu'elle a converti le site visiteurs dans les clients. Pensez au bouton «J'aime» sur Twitter. Lorsque vous «aimez» un tweet, de minuscules bulles colorées se répandent autour du bouton en forme de cœur alors qu'il semble se transformer en cercle autour du bouton avant de s'installer dans l'état final «aimé», un remplissage rouge. Ce serait beaucoup moins excitant si le cœur passait du simple contour au remplissage. Cette excitation et cette satisfaction sont un exemple parfait de la façon dont l'animation peut être utilisée pour améliorer l'expérience utilisateur.

Cet article va présenter le concept de rendu d'animation Adobe After Effects sur le Web avec Lottie, qui peut rendre réalisables des animations avancées, comme ce bouton Twitter.

Bodymovin est un plugin pour Adobe After Effects qui exporte les animations au format JSON, et Lottie est la bibliothèque qui les rend nativement sur mobile et sur le Web. Il a été créé par Hernan Torrisi. Si vous pensez Oh, je n'utilise pas After Effects, cet article n'est probablement pas pour moi, attendez un instant. Je n’utilise pas After Effects non plus, mais j’ai utilisé Lottie dans un projet.

Tu ne avoir d'utiliser Lottie pour faire de l'animation sur le Web, bien sûr. Une alternative consiste à concevoir des animations à partir de zéro. Mais cela peut prendre du temps, en particulier pour les types d'animations complexes dans lesquels Lottie est douée. Une autre alternative consiste à utiliser des animations GIF, qui sont illimitées dans les types d'animation qu'elles peuvent afficher, mais qui sont généralement le double de la taille des fichiers JSON produits par Bodymovin.

Alors allons-y et voyons comment cela fonctionne.

Obtenez le JSON

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

Ajouter le script au HTML

Nous devons également obtenir la bibliothèque JavaScript du lecteur Bodymovin dans notre code HTML et l'appeler loadAnimation() méthode. Les fondamentaux sont démontrés ici:

Activez l'animation

Une fois l'animation chargée dans le conteneur, nous pouvons la configurer selon la façon dont nous voulons qu'elle soit activée et quelle action doit l'activer avec les écouteurs d'événements. Voici les propriétés avec lesquelles nous devons travailler:

  • container: l'élément DOM dans lequel l'animation est chargée
  • path: le chemin relatif du fichier JSON qui contient l'animation
  • renderer: le format de l'animation, y compris SVG, canevas et HTML
  • loop: booléen pour spécifier si l'animation doit ou non boucler
  • autoplay: booléen pour spécifier si l'animation doit être lue ou non dès qu'elle est chargée
  • name: nom de l'animation pour le référencement futur

Notez dans l'exemple précédent que le animationData la propriété est commentée. Il est mutuellement exclusif avec le path propriété et est un objet contenant les données animées exportées.

Essayons un exemple

Je voudrais vous montrer comment utiliser Lottie avec cette icône de contrôle de lecture / pause animée d'Icônes8:

La bibliothèque de lecteurs Bodymovin est hébergée statiquement ici et peut être déposée dans le HTML de cette façon, mais elle est également disponible sous forme de package:

npm install lottie-web ### or yarn add lottie-web

Et puis, dans votre fichier HTML, incluez le script du dist dossier dans le package installé. Vous pouvez également importer la bibliothèque en tant que module depuis Skypack:

import lottieWeb from "https://cdn.skypack.dev/lottie-web";

Pour l'instant, notre bouton pause est en boucle et il joue également automatiquement:

Modifions cela pour que l'animation soit déclenchée par une action.

Animation sur un déclencheur

Si nous tournons autoplay désactivé, nous obtenons une icône de pause statique car c'est ainsi qu'elle a été exportée à partir d'After Effects.

Mais ne vous inquiétez pas! Lottie fournit des méthodes qui peuvent être appliquées aux instances d'animation. Cela dit, la documentation du package npm est plus complète.

Nous devons faire quelques choses ici:

  • Faites-le afficher comme l'état «lecture» au départ.
  • Animez-le à l'état "mis en veille" lors d'un clic
  • Animez entre les deux lors des clics suivants.

le goToAndStop(value, isFrame) la méthode est appropriée ici. Une fois l'animation chargée dans le conteneur, cette méthode définit l'animation pour qu'elle atteigne la valeur fournie, puis s'arrête là. Dans cette situation, nous devrons trouver la valeur de l'animation lorsqu'elle est en cours de lecture et la définir. Le deuxième paramètre spécifie si la valeur fournie est basée sur le temps ou le cadre. C'est un type booléen et la valeur par défaut est false (c.-à-d. valeur basée sur le temps). Puisque nous voulons définir l'animation sur l'image de lecture, nous la définissons sur true.

Une valeur basée sur le temps définit l'animation sur un point particulier de la chronologie. Par exemple, la valeur de temps au début de l'animation, lorsqu'elle est mise en pause, est 1. Cependant, une valeur basée sur l'image définit l'animation sur une valeur d'image particulière. Un cadre, selon TechTerms, est une image individuelle dans une séquence d'images. Donc, si je règle la valeur d'image de l'animation sur 5, l'animation passe à la cinquième image de l'animation (la «séquence d'images» dans cette situation).

Après avoir essayé différentes valeurs, j'ai découvert que l'animation était lue à partir des valeurs d'image 11 à 16. Par conséquent, j'ai choisi 14 pour être du bon côté.

Nous devons maintenant définir l'animation pour qu'elle se mette en pause lorsque l'utilisateur clique dessus et qu'elle est lue lorsque l'utilisateur clique à nouveau dessus. Ensuite, nous avons besoin du playSegments(segments, forceFlag) méthode. le segments paramètre est un type de tableau contenant deux nombres. Les premier et deuxième nombres représentent respectivement la première et la dernière image que la méthode doit lire. le forceFlag est un booléen qui indique si la méthode doit être déclenchée immédiatement ou non. Si défini sur false, il attendra que l'animation soit lue à la valeur spécifiée comme première image de la segments tableau avant qu'il ne soit déclenché. Si true, il lit les segments immédiatement.

Ici, j'ai créé un indicateur pour indiquer quand lire les segments de lecture à pause et de pause à lecture. J'ai également mis le forceFlag booléen à true parce que je veux une transition immédiate.

Alors voilà! Nous avons rendu une animation d'After Effects vers le navigateur! Merci Lottie!

Toile?

Je préfère utiliser SVG comme moteur de rendu car il prend en charge la mise à l'échelle et je pense qu'il rend les animations les plus nettes. Le rendu du canevas n'est pas aussi beau et ne prend pas en charge la mise à l'échelle. Toutefois, si vous souhaitez utiliser un canevas existant pour rendre une animation, vous devez effectuer certaines opérations supplémentaires.

Faire plus

Les instances d'animation ont également des événements qui peuvent également être utilisés pour configurer le comportement de l'animation.

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

Tous les événements sont disponibles sur la documentation du package npm. Sur ce que je dis, allez de l'avant et rendez des animations incroyables!

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *