Animations basées sur JavaScript Using Anime.js, partie 2: Paramètres

Anime.js Tutoriel d'animation Partie 2: Explication détaillée des paramètres. Dans la première partie du tutoriel, nous avons appris à spécifier des éléments cibles animés ainsi que des propriétés CSS et DOM animées. L'animation précédente était très basique, et tous les éléments cibles ont simplement déplacé une certaine distance à une vitesse fixe ou ont changé le rayon arrondi.

Parfois, vous devrez peut-être animer les éléments cibles d'une manière plus rythmique. Par exemple, vous pourriez avoir besoin de dix éléments différents pour passer de gauche à droite, avec l'animation de chaque élément retardant de 500 millisecondes entre les débuts. De même, vous voudrez peut-être augmenter ou diminuer la durée d'animation en fonction de la position de chaque élément.

Ce tutoriel vous montrera comment utiliser Anime.js pour contrôler avec précision le temps d'animation de différents éléments avec des paramètres spécifiques, contrôlant ainsi l'ordre de lecture de séquence d'animation d'un seul élément ou de tous les éléments.

Paramètres d'attribut

Ces paramètres vous permettent de contrôler la durée, le retard et le soulagement des effets d'un seul attribut ou d'un groupe d'attributs. stagger() Méthode

Jusqu'à présent, nous avons utilisé des fonctions pour transmettre différentes valeurs pour le retard ou la durée d'animation de l'élément cible. Vous pouvez également obtenir les mêmes fonctionnalités à l'aide de la méthode stagger(), qui vous permet essentiellement de contrôler la façon dont l'animation se produit entre plusieurs éléments. Il accepte deux paramètres. La première est la valeur que vous souhaitez appliquer, et la seconde est un objet avec de nombreux paramètres qui déterminent comment l'interlimentation est appliquée.

Ce qui suit est un exemple montrant l'entrelacement du paramètre start défini sur 1000. Les exemples sont les suivants:

// 持续时间从1000开始，每次增加800
duration: function(target, index) {
    return 1000 + index * 800;
},

// 使用stagger()实现等效功能
duration: anime.stagger(800, {"start": 1000})

Et si une valeur de durée non nulle devait être appliquée au début du dernier élément? Dans ce cas, nous pouvons utiliser les paramètres suivants de la méthode stagger() pour y parvenir. Comme vous pouvez le voir, le résultat final n'est pas une différence.

Il convient de noter que la méthode stagger ne fonctionne pas dans les versions plus anciennes des bibliothèques. Assurez-vous que vous utilisez la dernière version pour éviter les erreurs.

Résumé

Dans ce tutoriel, vous avez appris différents types de paramètres qui peuvent être utilisés pour contrôler l'animation des éléments cibles dans anime.js. Les paramètres d'attribut sont utilisés pour contrôler l'animation d'un seul attribut.

Vous pouvez les utiliser pour contrôler l'ordre dans lequel les animations sont lues pour un seul élément. Les paramètres de fonction vous permettent de contrôler le temps d'animation et la vitesse d'un seul élément par rapport à l'ensemble du groupe. Les paramètres d'animation vous permettent de contrôler la façon dont les animations sont jouées pour différents éléments.

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!