JavaScript-basierte Animation mit Anime.js, Teil 3: Erkunden von Werten, Zeitleisten und Wiedergabe

Im vorherigen Tutorial der Anime.js-Reihe haben Sie die verschiedenen Arten von Parametern kennengelernt, die steuern, wie verschiedene Zielelemente animiert werden. Sie haben auch gelernt, wie Sie Funktionsargumente verwenden, um die Verzögerung oder Dauer eines Elements schrittweise zu ändern.

In diesem Tutorial gehen wir noch einen Schritt weiter und lernen, wie Sie den Attributwert selbst mithilfe regulärer Zahlen, funktionsbasierter Werte und Keyframes angeben. Außerdem erfahren Sie, wie Sie Animationen mithilfe der Zeitleiste nacheinander abspielen.

Attributwert angeben

Anime.js ermöglicht es Ihnen, den Endwert der animierbaren Eigenschaften des Zielelements anzugeben. Der Anfangs- oder Startwert der Animation ist der Standardwert der Eigenschaft. Als Startwert kann auch jeder in CSS angegebene Wert verwendet werden. Es gibt mehrere Möglichkeiten, den Endwert anzugeben.

Es kann auch eine Zahl ohne Einheit sein. In diesem Fall werden bei der Berechnung der Eigenschaftswerte die Original- oder Standardeinheiten der Eigenschaft verwendet. Sie können den Wert auch als Zeichenfolge angeben, die Zeichenfolge muss jedoch mindestens einen numerischen Wert enthalten. Ein Beispiel für einen Zeichenfolgenwert ist 10vh、80% 和 9.125turn.

Sie können Attributwerte auch relativ zum aktuellen Wert angeben, anstatt absolute Werte anzugeben. Sie können beispielsweise +=150px 作为值，将最终 translateY 值设置为比当前值大 150px verwenden. Denken Sie daran, dass bei der Angabe relativer Werte nur Addition, Multiplikation und Subtraktion verwendet werden können.

Beim Animieren von Farben können Sie keine Farbnamen wie Rot, Schwarz und Blau verwenden, um den endgültigen Farbwert der Animation festzulegen. In diesem Fall findet die Farbanimation überhaupt nicht statt und die Änderungen erfolgen sofort. Die einzige Möglichkeit, Farben zu animieren, besteht darin, die Werte als Hexadezimalzahlen oder RGB- und HSL-Werte anzugeben.

Sie haben vielleicht bemerkt, dass wir keinen Anfangswert für das Zielelement angegeben haben, um es zu animieren. Anime.js ermittelt automatisch Anfangswerte basierend auf unserem CSS und den Standardwerten dieser Eigenschaften. Sie können jedoch ein Array verwenden, um einen Anfangswert für eine Eigenschaft anzugeben, der nicht der Standardwert ist. Das erste Element im Array stellt den Anfangswert dar und das zweite Element stellt den Endwert dar.

Sie können Funktionen verwenden, um unterschiedliche Werte für verschiedene Parameter festzulegen, anstatt für alle Zielelemente denselben Endwert zu verwenden. Der Vorgang ähnelt der Angabe funktionsbasierter Eigenschaftsparameter.

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
});

Für translateY 属性，我们使用元素的索引来设置翻译值。使用 50 * (i + 1) 会将每个元素的 translateY Werterhöhung um 50 Pixel.

Die Skalierungsanimation verwendet außerdem den Index des Elements zusammen mit dem integrierten Math.random() 函数返回一个小于 1 的浮点伪随机数。这样元素随机缩放，但属性的 i/10-Abschnitt, um die Wahrscheinlichkeit, dass das Element am Ende größer ist, leicht zu erhöhen.

Im Code der Rotationsanimation verwenden wir die Werte von Attributen wie anime.random(a, b) 辅助函数来获取 -180 到 180 之间的随机整数。此函数有助于分配随机积分translateY 和 rotate. Die Verwendung dieser Funktion zum Zuweisen zufälliger Skalenwerte führt zu extremen Ergebnissen.

Den Randradiuswerten für verschiedene Elemente werden mithilfe des Parameters el 函数参数计算目标元素的宽度来确定的。最后，代码的最后一部分也为 duration 和 delay zufällige Werte zugewiesen.

Sie können sehen, dass die im letzten Teil implementierte Animation sehr zufällig ist. Es besteht keine Beziehung zwischen den verschiedenen Attributwerten eines Elements oder seinen Verzögerungs- und Dauerwerten. Im wirklichen Leben ist es sinnvoller, Werte zu verwenden, die der Animation eine gewisse Orientierung verleihen.

Sie können Keyframes auch verwenden, um verschiedene Eigenschaften des Zielelements zu animieren. Jeder Keyframe enthält ein Array von Eigenschaftsobjekten. Mit diesem Objekt können Sie Eigenschaftswerte für diesen Teil der Animation angeben, duration、delay 和 easing. Der folgende Code erstellt eine Keyframe-basierte Übersetzungsanimation.

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
});

Sie können auch mehrere Eigenschaften gleichzeitig animieren, indem Sie für alle Parameter unterschiedliche oder gleiche Werte angeben. Im zweiten Fall wendet der globale Parameter delay eine anfängliche Verzögerung auf alle Elemente basierend auf ihrem Index an. Diese Verzögerung ist unabhängig von der Verzögerung, die auf jede Eigenschaft innerhalb des Keyframes angewendet wird.

创建和操作时间线

到目前为止，在本系列中，我们一直在使用 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 市场中提供的资源。

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

Das obige ist der detaillierte Inhalt vonJavaScript-basierte Animation mit Anime.js, Teil 3: Erkunden von Werten, Zeitleisten und Wiedergabe. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!