Share
Dans le premier didacticiel de la série Anime.js, vous avez appris différentes manières de spécifier les éléments cibles à animer et les types de propriétés CSS et d'attributs DOM pouvant être animés. Les animations du précédent tutoriel étaient très basiques. Tous les éléments cibles ne faisaient que déplacer une certaine distance ou modifier le rayon de la frontière à une vitesse fixe.
Parfois, vous devrez peut-être animer les éléments cibles de manière plus rythmée. Par exemple, vous pouvez déplacer dix éléments différents de gauche à droite avec un délai de 500 ms entre le début de l'animation pour chaque élément. De même, vous pouvez augmenter ou diminuer la durée de l'animation pour chaque élément en fonction de sa position..
Dans ce tutoriel, vous apprendrez à utiliser Anime.js pour programmer correctement l'animation de différents éléments à l'aide de paramètres spécifiques. Cela vous permettra de contrôler l'ordre dans lequel une séquence d'animation est jouée pour des éléments individuels ou tous les éléments..
Ces paramètres vous permettent de contrôler la durée, le délai et l’accélération de propriétés individuelles ou d’un groupe de propriétés à la fois. le durée et retard les paramètres sont spécifiés en millisecondes. La valeur par défaut pour la durée est 1000ms ou 1s.
Cela signifie que, sauf indication contraire, toute animation appliquée à un élément sera lue pendant 1 seconde. le retard Ce paramètre spécifie le délai nécessaire à l'animation une fois que vous l'avez déjà déclenchée. La valeur par défaut pour delay est 0. Cela signifie que les animations commenceront dès qu’elles seront déclenchées..
Vous pouvez utiliser le assouplissement paramètre permettant de contrôler la vitesse à laquelle une animation est lue pendant toute la durée de son activité. Certaines animations commencent lentement, accélèrent au milieu, puis ralentissent à la fin. D'autres commencent à un bon rythme, puis ralentissent le reste du temps.
Cependant, dans tous les cas, l’animation se termine toujours dans les délais spécifiés à l’aide des durée paramètre. Anime.js fournit de nombreuses fonctions d’atténuation que vous pouvez appliquer directement à vos éléments en utilisant uniquement leurs noms. Pour certaines fonctions d’accélération, vous pouvez également définir une valeur pour le paramètre. élasticité paramètre pour contrôler combien la valeur d'un élément rebondit comme un ressort.
Vous en apprendrez plus sur les différentes fonctions d’assouplissement dans le dernier tutoriel de la série. L'extrait de code suivant montre comment appliquer tous ces paramètres à différentes animations..
var slowAnimation = anime (cibles: '.square', translateY: 250, borderRadius: 50, durée: 4000); var delayAnimation = anime (cibles: '.square', translateY: 250, borderRadius: 50, delay: 800); var cubicAnimation = anime (cibles: '.square', translationY: 250, borderRadius: 50, durée: 1200, facilitation: 'aisanceDeCubique');
Comme vous pouvez le constater, ces paramètres peuvent être utilisés indépendamment d’autres paramètres ou en combinaison avec eux. le cubicAnimation a les deux durée et assouplissement paramètre qui lui est appliqué. Si la durée n'avait pas été spécifiée, l'animation aurait été exécutée pendant 1 seconde. Maintenant, il fonctionnera pendant 1 200 millisecondes ou 1,2 seconde.
Une limitation majeure des paramètres de propriété dans l'exemple ci-dessus est que toutes les animations de l'élément cible auront le même durée, retard et assouplissement valeurs.
Cela peut ou peut ne pas être le comportement souhaité. Par exemple, au lieu de traduire et de modifier le rayon de la bordure de l'élément cible en même temps, vous souhaiterez peut-être d'abord traduire l'élément cible, puis animer son rayon. Anime.js vous permet de spécifier différentes valeurs pour le durée, retard, assouplissement et élasticité paramètres pour les propriétés individuelles. Le code et la démo suivants devraient le rendre plus clair.
var indiParam = anime (cibles: '.square', translateY: valeur: 250, rotation: valeur: '2.125turn', backgroundColor: valeur: 'rgb (255,0,0)', durée: 400, retard: 1500, atténuation: 'linéaire', durée: 1500);
Dans le code ci-dessus, toutes les propriétés que nous souhaitons animer ont des valeurs différentes. L'animation de couleur d'arrière-plan a une durée de 400 ms, tandis que les animations de rotation et de traduction utilisent la valeur de durée globale de 1500 ms..
L'animation de la couleur d'arrière-plan comporte également un délai, de sorte que tout changement de couleur ne commence qu'après 1500 ms. le tourner et traduction propriétés utilisent la valeur par défaut pour la retard et assouplissement paramètres parce que nous n'avons ni fourni une valeur locale ni globale pour eux.
Les paramètres basés sur les propriétés sont utiles lorsque vous souhaitez modifier l'ordre et la durée pour l'animation de propriétés individuelles. Cependant, le même durée et retard sera toujours appliqué pour les propriétés individuelles sur tous les éléments cibles. Les paramètres basés sur les fonctions vous permettent de spécifier séparément durée, retard, élasticité et assouplissement pour différents éléments cibles de manière compacte.
Dans ce cas, vous définissez les valeurs de différents paramètres en utilisant des fonctions plutôt que des nombres. Ces fonctions acceptent trois paramètres: cible, indice, et targetCount. le cible paramètre stocke la référence à l'élément cible actuel. le indice Ce paramètre stocke l'index ou la position de l'élément cible actuel. le targetCount paramètre stocke le nombre total d'éléments cibles.
le cible Ce paramètre est utile lorsque les valeurs d'animation doivent être définies en fonction de certains attributs de l'élément cible. Par exemple, vous pouvez stocker le retard, durée ou assouplissement valeurs pour un élément cible dans les attributs de données, puis y accéder plus tard.
De même, vous pouvez accéder à la couleur d'arrière-plan d'un élément cible, puis le manipuler pour définir une valeur de couleur unique et finale pour des éléments individuels. De cette façon, vous pouvez animer tous les éléments pour obtenir une couleur d'arrière-plan 20% plus sombre que leur couleur actuelle..
le indice Ce paramètre vous donne la position de la cible actuelle dans notre liste d’éléments cibles. Vous pouvez l’utiliser pour modifier progressivement la valeur de paramètres tels que durée et retard pour différents éléments.
Ceci est généralement utile lorsque vous souhaitez définir les valeurs par ordre croissant. Vous pouvez également soustraire le indice du targetCount pour définir les valeurs dans l'ordre décroissant. L'extrait de code suivant utilise ces deux paramètres pour spécifier les valeurs par ordre croissant et décroissant..
var delaySequence = anime (cibles: '.square', translateY: 250, delay: function (cible, index) return index * 200;); var delaySequenceR = anime (cibles: '.square', translateY: 250, delay: fonction (target, index, targetCount) return (targetCount - index) * 200;);
Le code suivant définit un autre assouplissement valeur pour chaque élément cible en utilisant le indice paramètre.
var aisanceInValues = ['aisanceInQuad', 'aisanceInCubic', 'aisanceInQuart', 'aisanceInQuint', 'aisanceInSine', 'aisanceExpo', 'aisanceInCirc', 'aisanceInBack', 'aisanceInBlastique']; var easInSequence = anime (cibles: '.square', translateY: 250, durée: 2000, easing: fonction (cible, index) return aisInValues [index];, autoplay: false);
Ce dernier ensemble de paramètres vous permet de spécifier le nombre de fois où une animation doit être lue et la direction dans laquelle elle doit être lue. Vous pouvez spécifier le nombre de fois qu'une animation doit être lue à l'aide du bouton boucle paramètre. Il y a aussi un lecture automatique paramètre qui peut être réglé sur vrai ou faux. Sa valeur par défaut est vrai, mais vous pouvez arrêter les animations de commencer par eux-mêmes en le configurant sur faux.
le direction Ce paramètre contrôle la direction dans laquelle l'animation est jouée. Il peut avoir trois valeurs: Ordinaire, sens inverse, et alterner. La valeur par défaut est Ordinaire, ce qui permet à l’animation de jouer normalement des valeurs de départ aux valeurs de fin. Une fois que les éléments cibles atteignent la valeur finale, si le boucle la valeur est supérieure à 1, les éléments cibles reviennent brusquement aux valeurs initiales puis recommencent l'animation.
Quand le direction est réglé sur sens inverse et le boucle Si la valeur est supérieure à 1, l'animation est inversée. En d'autres termes, les éléments cibles démarrent l'animation à partir de leur état final et reviennent en arrière pour atteindre l'état initial. Une fois qu’ils sont dans l’état initial, les éléments reviennent à l’état final et recommencent ensuite l’animation inversée. le alterner valeur de direction change la direction de l'animation après chaque boucle.
var normalLoop = anime (cibles: '.square', translateY: 250, retard: fonction (cible, index) return index * 200;, boucle: 4, easing: 'aisance', autoplay: false);
Dans la démo suivante, j'ai défini le nombre de boucles sur quatre afin que vous puissiez facilement remarquer la différence d'animation des éléments dans différents modes..
Dans ce didacticiel, vous avez découvert différents types de paramètres pouvant être utilisés pour contrôler l’animation d’éléments cibles dans Anime.js. Les paramètres de propriété sont utilisés pour contrôler l'animation de propriétés individuelles..
Vous pouvez les utiliser pour contrôler la séquence dans laquelle l'animation est lue pour des éléments individuels. Les paramètres de fonction vous permettent de contrôler la synchronisation et la vitesse d'animation d'éléments individuels par rapport à l'ensemble du groupe. Les paramètres d'animation vous permettent de contrôler la manière dont l'animation est jouée pour différents éléments..
Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
Accentsconagua