Animation basée sur JavaScript utilisant Anime.js, Partie 3 : Exploration des valeurs, des chronologies et de la lecture

Dans le didacticiel précédent de la série Anime.js, vous avez découvert les différents types de paramètres qui contrôlent la manière dont les différents éléments cibles s'animent. Vous avez également appris à utiliser les arguments d'une fonction pour modifier progressivement le délai ou la durée d'un élément.

Dans ce didacticiel, nous allons aller plus loin et apprendre à spécifier la valeur de l'attribut elle-même à l'aide de nombres réguliers, de valeurs basées sur des fonctions et d'images clés. Vous apprendrez également à lire des animations en séquence à l'aide de la chronologie.

Spécifiez la valeur de l'attribut

Anime.js vous permet de spécifier la valeur finale d'une propriété animable d'un élément cible. La valeur initiale ou de départ de l'animation est la valeur par défaut de la propriété. Toute valeur spécifiée en CSS peut également être utilisée comme valeur de départ. Il existe plusieurs façons de spécifier la valeur finale.

Il peut également s'agir d'un nombre sans unité. Dans ce cas, les unités d'origine ou par défaut de la propriété seront utilisées lors du calcul de la valeur de la propriété. Vous pouvez également spécifier la valeur sous forme de chaîne, mais la chaîne doit contenir au moins une valeur numérique. Un exemple de valeur de chaîne est 10vh、80% 和 9.125turn.

Vous pouvez également spécifier une valeur de propriété relative à la valeur actuelle au lieu de spécifier une valeur absolue. Par exemple, vous pouvez utiliser +=150px 作为值，将最终 translateY 值设置为比当前值大 150px . N'oubliez pas que seules l'addition, la multiplication et la soustraction peuvent être utilisées lors de la spécification de valeurs relatives.

Lors de l'animation de couleurs, vous ne pouvez pas utiliser des noms de couleurs tels que rouge, noir et bleu pour définir la valeur de couleur finale de l'animation. Dans ce cas, l’animation des couleurs ne se produira pas du tout et les changements seront instantanés. La seule façon d'animer les couleurs est de spécifier les valeurs sous forme de nombres hexadécimaux ou de valeurs RVB et HSL.

Vous avez peut-être remarqué que nous n'avons pas spécifié de valeur initiale pour l'élément cible pour l'animer. Anime.js détermine automatiquement les valeurs initiales en fonction de notre CSS et des valeurs par défaut de ces propriétés. Toutefois, vous pouvez utiliser un tableau pour spécifier une valeur initiale pour une propriété autre que sa valeur par défaut. Le premier élément du tableau représente la valeur initiale et le deuxième élément représente la valeur finale.

Vous pouvez utiliser des fonctions pour définir différentes valeurs pour différents paramètres au lieu d'utiliser la même valeur finale pour tous les éléments cibles. Le processus est similaire à la spécification de paramètres de propriété basés sur une fonction.

var uniqueTranslation = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 * (i + 1);
  },
  autoplay: false
});

var randomScaling = anime({
  targets: '.square',
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  autoplay: false
});

var randomRotation = anime({
  targets: '.square',
  rotate: function() {
    return anime.random(-180, 180);
  },
  autoplay: false
});

var randomRadius = anime({
  targets: '.square',
  borderRadius: function(el) {
    return 20 + Math.random()*el.offsetWidth/4;
  },
  autoplay: false
});

var randomAll = anime({
  targets: '.square',
  translateY: function(el, i) {
    return 50 + 50 * i;
  },
  scale: function(el, i) {
    return Math.random()*1.5 + i/10;
  },
  rotate: 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 translateY 属性，我们使用元素的索引来设置翻译值。使用 50 * (i + 1) 会将每个元素的 translateY les valeurs augmentent de 50 pixels.

L'animation de mise à l'échelle utilise également l'index de l'élément ainsi que la section Math.random() 函数返回一个小于 1 的浮点伪随机数。这样元素随机缩放，但属性的 i/10 intégrée pour augmenter légèrement la probabilité que l'élément qui finira par avoir une taille plus grande.

Dans le code d'animation de rotation, nous utilisons les valeurs d'attributs tels que anime.random(a, b) 辅助函数来获取 -180 到 180 之间的随机整数。此函数有助于分配随机积分translateY 和 rotate. L'utilisation de cette fonction pour attribuer des valeurs d'échelle aléatoires produira des résultats extrêmes.

Les valeurs du rayon de bordure pour différents éléments se voient attribuer des valeurs aléatoires à l'aide du paramètre el 函数参数计算目标元素的宽度来确定的。最后，代码的最后一部分也为 duration 和 delay.

Vous pouvez voir que l'animation implémentée dans la dernière partie est très aléatoire. Il n'y a aucune relation entre les différentes valeurs d'attribut d'un élément ou ses valeurs de délai et de durée. Dans la vraie vie, il est plus judicieux d'utiliser des valeurs qui ajoutent une certaine direction à l'animation.

Vous pouvez également utiliser des images clés pour animer différentes propriétés de l'élément cible. Chaque image clé contient un tableau d'objets de propriété. Vous pouvez utiliser cet objet pour spécifier les valeurs de propriété pour cette partie de l'animation, duration、delay 和 easing. Le code suivant crée une animation de traduction basée sur des images clés.

var keyframeTranslation = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  autoplay: false
});

var keyframeAll = anime({
  targets: '.square',
  translateY: [
    { value: 100, duration: 500},
    { value: 300, duration: 1000, delay: 1000},
    { value: 40, duration: 500, delay: 1000}
  ],
  scale: [
    { value: 1.1, duration: 500},
    { value: 0.5, duration: 1000, delay: 1000},
    { value: 1, duration: 500, delay: 1000}
  ],
  rotate: [
    { value: 60, duration: 500},
    { value: -60, duration: 1000, delay: 1000},
    { value: 75, duration: 500, delay: 1000}
  ],
  borderRadius: [
    { value: 10, duration: 500},
    { value: 50, duration: 1000, delay: 1000},
    { value: 25, duration: 500, delay: 1000}
  ],
  delay: function(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 paramètre global delay applique un délai initial à tous les éléments en fonction de l'index. Ce délai est indépendant du délai appliqué à chaque propriété au sein de l'image clé.

创建和操作时间线

到目前为止，在本系列中，我们一直在使用 delay 参数以特定顺序播放不同的动画。要为此目的使用延迟，我们还需要知道前一个动画的持续时间。

随着动画序列的复杂性不断增加，维护正确的延迟值变得非常繁琐。其中一个动画的持续时间的任何变化都会迫使我们重新计算所有延迟值，以保持动画的原始序列。

解决这个问题的一个更好的方法是使用时间轴来控制动画序列。您必须使用 anime.timeline() 函数在 Anime.js 中创建时间线。您还可以将不同的参数作为对象传递给该函数。这些参数可以指定时间线播放的方向、循环次数以及 autoplay 参数来确定是否应自动播放动画。所有这些参数都已在本系列的参数教程中详细讨论。

您可以使用 add() 方法将不同的动画添加到时间轴。添加到时间线的所有动画将按照添加顺序播放。可以指定绝对或相对偏移值来控制动画的播放顺序。

当使用相对偏移值时，当前动画的开始时间是相对于前一个动画的时间确定的。相对偏移可以分为三种类型：

• +=offset：在这种情况下，当前动画会在上一个动画结束后经过 offset 毫秒后开始播放。
• -=offset：在这种情况下，当前动画在上一个动画结束前 offset 毫秒开始播放。
• *=offset：在这种情况下，当前动画会在前一个动画的动画持续时间的 offset 倍后的毫秒数后开始播放。

以下代码展示了如何创建基本时间线和具有相对偏移值的时间线。

var basicTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

basicTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    translateY: 100
 }).add({
    targets: '.blue',
    translateY: 0
 });

var offsetTimeline = anime.timeline({
  direction: "alternate",
  loop: 2,
  autoplay: false
});

offsetTimeline.add({
    targets: '.square',
    translateY: 200
 }).add({
    targets: '.red',
    offset: '+=1000',
    translateY: 100
 }).add({
    targets: '.blue',
    offset: '*=2',
    translateY: 0
 });

尝试单击上述演示中的偏移时间线按钮。您将看到红色方块动画结束和蓝色方块动画开始之间有 2 秒的延迟。

我们没有为红方块动画指定 duration 。因此，使用默认值 1000ms 或 1s 作为持续时间。蓝色方形动画的乘数偏移量使该值加倍，这会导致动画延迟两秒。

当使用绝对偏移值时，时间线的起始时间用作参考点。通过对时间线开头发生的动画使用较大的偏移值，可以反转动画的播放顺序。

播放选项

Anime.js 有多种选项可以在任何给定点播放、暂停、重新启动或搜索动画或时间线。

play() 函数允许我们从当前进度开始播放动画。 pause() 函数将在调用该函数时冻结动画。 restart() 函数从头开始播放动画，无论其当前进度如何。 seek(value) 函数可用于将动画提前 value 毫秒数。

您应该记住，play() 函数仅从暂停时恢复动画。如果动画已经结束，则无法使用 play() 重播动画。要重播动画，您必须使用 restart() 函数。

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000,
  easing: 'linear',
  autoplay: 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));
};

请注意，我们没有使用 seekInput.value 来设置查找函数的值。这是因为范围输入的最大值已在标记中设置为 100。直接使用输入范围的值将允许我们最多查找 100 毫秒。将范围输入值乘以动画持续时间可确保我们可以在范围滑块上从头到尾查找动画。

最终想法

在本教程中，您学习了如何将不同的属性值设置为数字、函数或关键帧的动画。您还学习了如何在 Anime.js 中控制和操作时间线来控制动画序列的播放顺序。

如果您正在寻找其他资源来学习或在工作中使用，请查看我们在 Envato 市场中提供的资源。

如果您对本教程有任何疑问，请在评论中告诉我。

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!