Share
Dans le didacticiel précédent de la série Anime.js, vous avez découvert différents types de paramètres permettant de contrôler la manière dont les différents éléments cibles devaient être animés. Vous avez également appris à utiliser les paramètres de fonction pour modifier progressivement le délai ou la durée des éléments..
Dans ce didacticiel, nous allons plus loin et apprenons à spécifier les valeurs de propriété elles-mêmes à l'aide de nombres normaux, de valeurs basées sur des fonctions et d'images clés. Vous apprendrez également à lire des animations en séquence à l'aide de chronologies..
Anime.js vous permet de spécifier les valeurs finales ou finales des propriétés animables des éléments cibles. La valeur initiale ou de départ de l'animation est la valeur par défaut de cette propriété. Toute valeur spécifiée dans le CSS peut également servir de valeur de départ. Il y a plusieurs façons de spécifier une valeur finale.
Ce peut également être un nombre sans unité. Dans ce cas, les unités d'origine ou par défaut de la propriété sont utilisées lors du calcul des valeurs de propriété. Vous pouvez également spécifier la valeur sous forme de chaîne, mais celle-ci doit contenir au moins une valeur numérique. Des exemples de valeurs de chaîne seraient 10vh, 80%, et 9.125tour.
Au lieu de spécifier une valeur absolue, vous pouvez également spécifier des valeurs de propriété par rapport à leur valeur actuelle. Par exemple, vous pouvez définir la finale traduction valeur d'être 150px supérieur à la valeur actuelle en utilisant += 150px comme une valeur. N'oubliez pas que vous ne pouvez utiliser que l'addition, la multiplication et la soustraction tout en spécifiant des valeurs relatives.
Lors de l'animation de couleurs, vous ne pouvez pas utiliser de noms de couleurs tels que le rouge, le noir et le bleu pour définir une valeur de couleur finale pour l'animation. Dans de tels cas, l'animation des couleurs ne se produira pas du tout et le changement sera instantané. La seule façon d'animer les couleurs est de spécifier les valeurs sous forme de chiffres hexadécimaux ou en termes de valeurs RVB et HSL.
Comme vous l'avez peut-être remarqué, nous n'avons pas spécifié de valeur initiale pour que nos éléments cibles puissent les animer. Anime.js détermine automatiquement la valeur initiale en fonction de notre CSS et des valeurs par défaut de ces propriétés. Cependant, vous pouvez spécifier une valeur initiale autre que la valeur par défaut pour une propriété à l'aide de tableaux. Le premier élément du tableau représente la valeur initiale et le second élément, la valeur finale..
Au lieu d'utiliser la même valeur finale pour tous vos éléments cibles, vous pouvez utiliser des fonctions pour définir différentes valeurs pour différents paramètres. Le processus est similaire à la spécification de paramètres de propriété basés sur des fonctions.
var uniqueTranslation = anime (cibles: '.square', translateY: fonction (el, i) return 50 * (i + 1);, autoplay: false); var randomScaling = anime (cibles: '.square', échelle: fonction (el, i) return Math.random () * 1.5 + i / 10;, autoplay: false); var randomRotation = anime (cibles: '.square', rotation: fonction () return anime.random (-180, 180);, autoplay: false); var randomRadius = anime (cibles: '.square', borderRadius: fonction (el) return 20 + Math.random () * el.offsetWidth / 4;, autoplay: false); var randomAll = anime (cibles: '.square', translateY: fonction (el, i) return 50 + 50 * i;, échelle: fonction (el, i) return Math.random () * 1.5 + i / 10;, rotation: function () return anime.random (-180, 180);, borderRadius: function (el) return Math.random () * el.offsetWidth / 2;, duration: function ( ) return anime.random (1500, 2400);, delay: function () return anime.random (0, 1000);, autoplay: false);
Pour le traduction propriété, nous utilisons l'index de l'élément pour définir une valeur de traduction. En utilisant 50 * (i + 1) augmente le traduction valeur pour chaque élément de 50 pixels.
L’animation de mise à l’échelle utilise également l’index de l’élément ainsi que la fonction intégrée. Math.random () fonction pour renvoyer un nombre pseudo-aléatoire à virgule flottante inférieur à 1. De cette façon, les éléments sont redimensionnés de manière aléatoire, mais le i / 10 une partie de la propriété augmente légèrement la possibilité que des éléments apparaissant à la fin aient une taille plus grande.
Dans le code pour l'animation de rotation, nous utilisons le anime.random (a, b) fonction d'assistance pour obtenir des entiers aléatoires compris entre -180 et 180. Cette fonction est utile pour affecter des valeurs entières aléatoires à des propriétés telles que traduction et tourner. L'utilisation de cette fonction pour attribuer des valeurs d'échelle aléatoires produira des résultats extrêmes.
La valeur du rayon de la bordure pour différents éléments est déterminée en calculant la largeur des éléments cibles à l'aide de el paramètre de fonction. Enfin, la dernière partie du code attribue des valeurs aléatoires à la durée et retard paramètres aussi bien.
Vous pouvez voir que l'animation obtenue par la dernière partie est très aléatoire. Il n'y a pas de relation entre les valeurs des différentes propriétés des éléments ou leurs valeurs de délai et de durée. Dans la vie réelle, il est plus judicieux d'utiliser des valeurs qui peuvent ajouter une certaine direction à l'animation..
Il est également possible d’animer différentes propriétés de vos éléments cibles à l’aide d’images clés. Chaque image clé est constituée d'un tableau de l'objet de propriété. Vous pouvez utiliser l'objet pour spécifier la valeur de la propriété, durée, retard et assouplissement pour cette partie de l'animation. Le code suivant crée une animation de traduction basée sur une image clé..
var keyframeTranslation = anime (cibles: '.square', translateY: [valeur: 100, durée: 500, valeur: 300, durée: 1000, retard: 1000, valeur: 40, durée: 500, retard : 1000], autoplay: false); var keyframeAll = anime (cibles: '.square', translateY: [valeur: 100, durée: 500, valeur: 300, durée: 1000, retard: 1000, valeur: 40, durée: 500, retard : 1000], scale: [valeur: 1.1, durée: 500, valeur: 0.5, durée: 1000, retard: 1000, valeur: 1, durée: 500, retard: 1000], rotation: [ valeur: 60, durée: 500, valeur: -60, durée: 1000, retard: 1000, valeur: 75, durée: 500, retard: 1000], borderRadius: [valeur: 10, durée: 500, valeur: 50, durée: 1000, retard: 1000, valeur: 25, durée: 500, retard: 1000], retard: fonction (el, i) return 100 * (i + 1) , autoplay: false);
Vous pouvez également animer plusieurs propriétés à la fois en spécifiant des valeurs différentes ou identiques pour tous les paramètres. Dans le second cas, le global retard Ce paramètre applique un délai initial à tous les éléments en fonction de leur index. Ce délai est indépendant du délai appliqué à chaque propriété dans les images clés..
Jusqu'ici dans la série, nous avons utilisé le retard paramètre pour jouer différentes animations dans une séquence spécifique. Pour utiliser le délai à cette fin, nous devons également connaître la durée de l'animation précédente..
Avec la complexité croissante de la séquence d'animation, le maintien de la valeur de délai appropriée devient très fastidieux. Toute modification de la durée d'une des animations nous obligera à recalculer toutes les valeurs de délai pour conserver les animations dans la séquence d'origine..
Une meilleure solution à ce problème consiste à utiliser des scénarios pour contrôler la séquence d'animation. Vous devez utiliser le anime.timeline () fonction pour créer un scénario dans Anime.js. Vous pouvez également transmettre différents paramètres à cette fonction en tant qu'objet. Ces paramètres peuvent spécifier la direction dans laquelle la timeline est jouée, le nombre de boucles et une lecture automatique paramètre permettant de déterminer si l’animation doit être lue automatiquement. Tous ces paramètres ont été discutés en détail dans le tutoriel sur les paramètres de cette série..
Vous pouvez ajouter différentes animations à un montage en utilisant le ajouter() méthode. Toutes les animations ajoutées à la chronologie seront lues dans l'ordre dans lequel elles ont été ajoutées. Il est possible de spécifier des valeurs de décalage absolues ou relatives pour contrôler l’ordre de lecture des animations..
Lorsque des valeurs de décalage relatives sont utilisées, l’heure de début de l’animation en cours est déterminée en fonction du minutage de l’animation précédente. Les décalages relatifs peuvent être de trois types:
Le code suivant montre comment créer un scénario de base et un scénario avec des valeurs de décalage relatives.
var basicTimeline = anime.timeline (direction: "substitut", boucle: 2, autoplay: false); basicTimeline.add (cibles: '.square', translateY: 200). add (cibles: '.red', translateY: 100). add (cibles: '.blue', translateY: 0); var offsetTimeline = anime.timeline (direction: "substitut", boucle: 2, autoplay: false); offsetTimeline.add (cibles: '.square', translateY: 200). add (cibles: '.red', offset: '+ = 1000', translateY: 100). add (cibles: '.blue ', offset:' * = 2 ', translateY: 0);
Essayez de cliquer sur le Chronologie décalée bouton dans la démo ci-dessus. Vous verrez qu'il y a un délai de 2 secondes entre la fin de l'animation des carrés rouges et le début de l'animation des carrés bleus..
Nous n'avons pas spécifié de durée pour l'animation du carré rouge. Par conséquent, une valeur par défaut de 1000 ms ou 1 s est utilisée comme durée. Le décalage du multiplicateur de l'animation du carré bleu double cette valeur, ce qui entraîne un délai de deux secondes dans l'animation..
Lorsque des valeurs de décalage absolues sont utilisées, l'heure de début de la chronologie est utilisée comme point de référence. Il est possible d’inverser la séquence de lecture des animations en utilisant des valeurs de décalage élevées pour les animations qui se produisent au début de la timeline..
Anime.js a une variété d'options pour jouer, mettre en pause, redémarrer ou rechercher des animations ou des timelines à n'importe quel moment.
le jouer() Cette fonction nous permet de démarrer l’animation à partir de sa progression actuelle. le pause() function gèlera l'animation au moment où la fonction a été appelée. le redémarrer() La fonction démarre l’animation depuis le début, quelle que soit sa progression actuelle. le chercher (valeur) fonction peut être utilisée pour faire avancer l'animation en valeur nombre de millisecondes.
Vous devriez garder à l'esprit que le jouer() La fonction ne reprend l'animation qu'à partir du moment où elle a été mise en pause. Si l'animation a déjà atteint sa fin, vous ne pouvez pas rejouer l'animation à l'aide de jouer(). Pour rejouer l'animation, vous devrez utiliser le redémarrer() une fonction.
Accentsconagua
var slowAnimation = anime (cibles: '.square', translateY: 250, borderRadius: 50, durée: 4000, accélération: 'linear', lecture automatique: false); document.querySelector ('. play'). onclick = slowAnimation.play; document.querySelector ('. pause'). onclick = slowAnimation.pause; document.querySelector ('. restart'). onclick = slowAnimation.restart; var seekInput = document.querySelector ('. seek'); seekInput.oninput = function () slowAnimation.seek (slowAnimation.duration * (seekInput.value / 100)); ;Notez que nous n'utilisons pas seekInput.value définir une valeur pour la fonction de recherche. Cela est dû au fait que la valeur maximale pour l'entrée de plage a été définie sur 100 dans le balisage. L’utilisation directe de la valeur pour la plage d’entrée nous permettra de ne rechercher que jusqu’à 100 ms. En multipliant la valeur d'entrée de plage par la durée de l'animation, vous pouvez rechercher l'animation du début à la fin avec notre curseur de plage..
Dans ce didacticiel, vous avez appris à animer différentes valeurs de propriétés sous forme de nombres, de fonctions ou d'images clés. Vous avez également appris à contrôler et à manipuler les scénarios dans Anime.js pour contrôler l'ordre de lecture d'une séquence d'animation..
Si vous recherchez des ressources supplémentaires à étudier ou à utiliser dans votre travail, consultez ce que nous avons à votre disposition sur le marché Envato..
Si vous avez des questions concernant ce tutoriel, merci de me le faire savoir dans les commentaires..
