Erweiterte Parameter: JavaScript-basierte Animation mit Anime.js, Teil 2

Im ersten Tutorial der Anime.js-Reihe haben Sie die verschiedenen Möglichkeiten zur Angabe des zu animierenden Zielelements sowie die Arten von CSS-Eigenschaften und DOM-Eigenschaften kennengelernt, die animiert werden können. Die Animation im vorherigen Tutorial war sehr einfach. Alle Zielelemente bewegen sich einfach eine bestimmte Distanz oder ändern den Begrenzungsradius mit einer festen Geschwindigkeit.

Manchmal müssen Sie ein Zielelement möglicherweise rhythmischer animieren. Beispielsweise könnten Sie 10 verschiedene Elemente haben, die Sie von links nach rechts verschieben möchten, mit einer Verzögerung von 500 ms zwischen dem Start der Animation jedes Elements. Ebenso möchten Sie möglicherweise die Animationsdauer basierend auf der Position jedes Elements verlängern oder verkürzen.

In diesem Tutorial erfahren Sie, wie Sie Anime.js verwenden, um Animationen verschiedener Elemente mithilfe bestimmter Parameter zeitlich korrekt abzustimmen. Dadurch können Sie die Wiedergabereihenfolge von Animationssequenzen für einzelne Elemente oder für alle Elemente steuern.

Attributparameter

Mit diesen Parametern können Sie die Dauer, Verzögerung und Lockerung einer einzelnen Eigenschaft oder einer Gruppe von Eigenschaften gleichzeitig steuern. duration 和 delay Parameter werden in Millisekunden angegeben. Der Standardwert für die Dauer beträgt 1000 Millisekunden oder 1 Sekunde.

Das bedeutet, dass jede auf ein Element angewendete Animation 1 Sekunde lang abgespielt wird, sofern nicht anders angegeben. delay Parameter gibt an, wie lange es dauert, bis die Animation nach dem Auslösen startet. Der Standardwert für die Verzögerung ist 0. Das bedeutet, dass die Animation startet, sobald sie ausgelöst wird.

Mit dem Parameter easing können Sie die Geschwindigkeit steuern, mit der die Animation während der Aktivität abgespielt wird. Manche Animationen beginnen langsam, werden in der Mitte schneller und am Ende wieder langsamer. Andere beginnen schnell und verlangsamen dann den Rest des Weges.

In allen Fällen legt die Animation jedoch immer einen Wert fest, indem der Parameter duration 参数指定的时间内完成。 Anime.js 提供了许多缓动函数，您可以仅使用元素的名称直接将它们应用于元素。对于某些缓动函数，您还可以为 elasticity verwendet wird, um zu steuern, wie stark der Wert des Elements wie eine Feder hin und her springt.

Mehr über die verschiedenen Beschleunigungsfunktionen erfahren Sie im letzten Tutorial dieser Serie. Der folgende Codeausschnitt zeigt, wie alle diese Parameter auf verschiedene Animationen angewendet werden.

var slowAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 4000
});

var delayAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  delay: 800
});

var cubicAnimation = anime({
  targets: '.square',
  translateY: 250,
  borderRadius: 50,
  duration: 1200,
  easing: 'easeInOutCubic'
});

Wie Sie sehen, können diese Parameter unabhängig von anderen Parametern oder in Kombination mit diesen verwendet werden. cubicAnimation wendet sowohl die Parameter duration als auch cubicAnimation 同时应用了 duration 和 easing an. Wenn keine Dauer angegeben ist, läuft die Animation 1 Sekunde lang. Jetzt läuft es 1.200 Millisekunden oder 1,2 Sekunden.

Eine wesentliche Einschränkung der Attributparameter im obigen Beispiel besteht darin, dass alle Animationen des Zielelements die gleiche Dauer, duration、delay 和 easing und Beschleunigung Wert.

Dies kann das gewünschte Verhalten sein oder auch nicht. Beispielsweise möchten Sie möglicherweise zuerst das Zielelement verschieben und dann seinen Randradius animieren, anstatt gleichzeitig zu schwenken und den Randradius des Zielelements zu ändern. Mit Anime.js können Sie für jede Eigenschaft unterschiedliche Werte für die Parameter duration, duration、delay、easing 和 指定不同的值各个属性的elastic,

und elastisch angeben. Der folgende Code und die Demo sollten es klarer machen.

var indiParam = anime({
  targets: '.square',
  translateY: {
    value: 250
  },
  rotate: {
    value: '2.125turn'
  },
  backgroundColor: {
    value: 'rgb(255,0,0)',
    duration: 400,
    delay: 1500,
    easing: 'linear'
  },
  duration: 1500
});

Im obigen Code haben alle Eigenschaften, die wir animieren möchten, unterschiedliche Werte. Die Hintergrundfarbanimation hat eine Dauer von 400 ms, während die Rotations- und Schwenkanimationen einen globalen Dauerwert von 1500 ms verwenden.

rotate 和 translateY 属性使用 delay 和 easingDie Hintergrundfarbanimation ist ebenfalls verzögert, sodass eine Farbänderung erst nach Ablauf von 1500 Millisekunden beginnt. Die Attribute rotate und translateY verwenden die Standardwerte der Parameter

und

, da wir weder lokale noch globale Werte bereitstellen ​für sie Wert.

🎜🎜

基于函数的参数

当您想要更改单个属性的动画顺序和持续时间时，基于属性的参数非常有用。但是，相同的 duration 和 delay 仍将应用于所有目标元素上的各个属性。基于函数的参数允许您单独指定 duration、delay、elasticity 和 easing以紧凑的方式针对不同的目标元素。

在这种情况下，您可以使用函数而不是数字来设置不同参数的值。这些函数接受三个参数：target、index 和 targetCount。 target 参数存储对当前目标元素的引用。 index 参数存储当前目标元素的索引或位置。 targetCount 参数存储目标元素的总数。

当需要根据目标元素的某些属性设置动画值时，target 参数非常有用。例如，您可以将目标元素的 delay、duration 或 easing 值存储在数据属性中，然后稍后访问它们.

类似地，您可以访问目标元素的背景颜色，然后操作它来为各个元素设置最终的唯一颜色值。通过这种方式，您可以对所有元素进行动画处理，使其背景颜色比当前颜色深 20%。

index 参数为您提供当前目标在目标元素列表中的位置。您可以使用它逐步更改不同元素的 duration 和 delay 等参数的值。

当您想要按升序设置值时，这通常很有用。您还可以从 targetCount 中减去 index 以按降序设置值。以下代码片段使用这两个参数来按升序和降序指定值。

var delaySequence = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  }
});

var delaySequenceR = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
  }
});

以下代码使用 index 参数为每​​个目标元素设置不同的 easing 值。

var easeInValues = ['easeInQuad', 'easeInCubic', 'easeInQuart', 'easeInQuint', 'easeInSine', 'easeInExpo', 'easeInCirc', 'easeInBack', 'easeInElastic'];

var easeInSequence = anime({
  targets: '.square',
  translateY: 250,
  duration: 2000,
  easing: function(target, index) {
    return easeInValues[index];
  },
  autoplay: false
});

动画参数

最后一组参数允许您指定动画应播放的次数以及播放的方向。您可以使用loop参数指定动画播放的次数。还有一个 autoplay 参数，可以设置为 true 或 false。它的默认值为 true，但您可以通过将其设置为 false 来阻止动画自行启动。

direction 参数控制动画播放的方向。它可以具有三个值：normal、reverse 和 alternate。默认值为 normal，它使动画从开始值到结束值正常播放。一旦目标元素达到结束值，如果 loop 值大于 1，目标元素会突然跳回起始值，然后再次开始动画。

当direction 设置为reverse 并且loop 值大于1 时，动画将反转。换句话说，目标元素从最终状态开始动画，然后向后到达初始状态。一旦它们处于初始状态，元素就会跳回到最终状态，然后再次开始反向动画。 alternate 方向值会在每次循环后更改动画方向。

var normalLoop = anime({
  targets: '.square',
  translateY: 250,
  delay: function(target, index) {
    return index * 200;
  },
  loop: 4,
  easing: 'easeInSine',
  autoplay: false
});

在下面的演示中，我将循环次数设置为四，以便您可以轻松注意到不同模式下元素动画的差异。

使用 stagger() 方法

到目前为止，在本教程中，我们已经使用函数将不同的值传递给目标元素的动画延迟或持续时间。您还可以借助 Anime.js 中的 stagger() 方法获得相同的功能。

stagger() 方法基本上允许您控制动画如何在多个元素上发生。它接受两个参数。第一个是您想要应用的值，第二个是一个带有一堆参数的对象，这些参数决定如何应用交错。

下面是一个示例，展示 stagger() 如何与我们到目前为止编写的常规函数​​进行比较：

// A function to introduce animation delay in elements.
delay: function(target, index) {
    return index * 200;
}

// The stagger() Equivalent
delay: anime.stagger(200);

您现在可能会问是否有一种方法可以反向应用动画延迟，就像我们对函数所做的那样。是的，这绝对是可能的。这是一个例子：

// Reversing the delay direction
delay: function(target, index, targetCount) {
    return (targetCount - index) * 200;
}

// Equivalent functionality with stagger()
delay: anime.stagger(200, {"direction": "reverse"})
  

我们可以类似地对动画持续时间应用交错。由于交错，前面示例中第一个元素的延迟值被设置为 0，这也是我们想要做的。但是，第一个元素的动画持续时间必须非零。否则，页面加载后就会处于结束阶段。

可以借助 start 参数设置第一个元素的动画的非零持续时间，该参数设置为 1000 以达到惊人效果。这是一个例子：

// Duration starts at 1000 and increases by 800
duration: function(target, index) {
    return 1000 + index * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000})

如果在开始最后一个元素时必须应用非零持续时间值怎么办？在这种情况下，我们可以对 stagger() 方法使用以下参数：

// A non-zero duration in reverse direction
duration: function(target, index, targetCount) {
    return 1000 + (targetCount - index) * 800;
}

// Equivalent functionality with stagger()
duration: anime.stagger(800, {"start": 1000, "direction": "reverse"})

以下 CodePen 演示的所有操作与“基于函数的参数”部分下的示例类似，但它使用 stagger() 方法来执行此操作。正如您所看到的，最终结果没有任何区别。

我想指出的一件事是交错方法在旧版本的库中不起作用。确保您使用的是最新版本以避免任何错误。

最终想法

在本教程中，您了解了可用于控制 Anime.js 中目标元素的动画的不同类型的参数。属性参数用于控制各个属性的动画。

您可以使用它们来控制各个元素的动画播放顺序。函数参数允许您控制单个元素相对于整个组的动画时间和速率。动画参数允许您控制不同元素的动画本身的播放方式。

Das obige ist der detaillierte Inhalt vonErweiterte Parameter: JavaScript-basierte Animation mit Anime.js, Teil 2. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!