Anime.js で学ぶ JavaScript アニメーション第 2 回パラメータの詳細解説-jsチュートリアル-php.cn

Anime.js で学ぶ JavaScript アニメーション第 2 回パラメータの詳細解説

Anime.js シリーズの最初のチュートリアルでは、アニメーション化するターゲット要素を指定するさまざまな方法と、アニメーション化できる CSS プロパティと DOM プロパティの種類について学びました。前のチュートリアルのアニメーションは非常に基本的なものでした。すべてのターゲット要素は、単純に一定の距離を移動するか、固定速度で境界半径を変更します。

よりリズミカルな方法でターゲット要素をアニメーション化する必要がある場合があります。たとえば、10 個の異なる要素があり、各要素のアニメーションの開始間に 500 ミリ秒の遅延を設けて左から右に移動するとします。同様に、各要素の位置に基づいてアニメーションの継続時間を増減したい場合があります。

このチュートリアルでは、Anime.js を使用して、特定のパラメーターを使用してさまざまな要素のアニメーションの時間を正確に計測する方法を学習します。これにより、個々の要素またはすべての要素のアニメーションシーケンスの再生順序を制御できるようになります。

属性パラメータ

これらのパラメータを使用すると、単一のプロパティまたはプロパティのグループの継続時間、遅延、イージングを一度に制御できます。 duration および lay パラメーターはミリ秒単位で指定します。期間のデフォルト値は 1000 ミリ秒または 1 秒です。

これは、特に指定がない限り、要素に適用されるアニメーションは 1 秒間再生されることを意味します。 遅延 このパラメータは、アニメーションがトリガーされてから開始するまでの時間を指定します。遅延のデフォルト値は 0 です。これは、アニメーションがトリガーされるとすぐに開始されることを意味します。

easing パラメータを使用して、アクティビティ中にアニメーションが再生される速度を制御できます。一部のアニメーションはゆっくり始まり、途中で速度が上がり、最後に再び遅くなります。初めは速く、残りは遅くなる人もいます。

ただし、どのような場合でも、アニメーションは常に duration パラメータで指定された時間内に完了します。 Anime.js には、名前だけを使用して要素に直接適用できるイージング関数が多数用意されています。一部のイージング関数では、elasticity パラメーターの値を設定して、要素の値がバネのように前後にどの程度跳ね返るかを制御することもできます。

このシリーズの最後のチュートリアルでは、さまざまなイージング関数について詳しく学習します。次のコードスニペットは、これらすべてのパラメータをさまざまなアニメーションに適用する方法を示しています。

リーリー

ご覧のとおり、これらのパラメータは他のパラメータとは独立して使用することも、他のパラメータと組み合わせて使用することもできます。 cubicAnimation は、duration パラメーターと easing パラメーターの両方を適用します。期間が指定されていない場合、アニメーションは 1 秒間実行されます。これで、1,200 ミリ秒、つまり 1.2 秒間実行されます。

上記の例の属性パラメーターの主な制限の 1 つは、ターゲット要素のすべてのアニメーションが同じ duration、delay、および easing の値を持つことです。。

これは望ましい動作である場合もあれば、そうでない場合もあります。たとえば、ターゲット要素の境界半径のパンと変更を同時に行うのではなく、最初にターゲット要素を移動してからその境界半径をアニメーション化したい場合があります。 Anime.js では、duration、delay、easing、elasticity パラメーターのそれぞれに異なる値のプロパティを指定できます。以下のコードとデモを見ると、それがより明確になるはずです。

リーリー

上記のコードでは、アニメーション化するすべてのプロパティの値が異なります。背景色のアニメーションの持続時間は 400 ミリ秒ですが、回転アニメーションとパンアニメーションの持続時間のグローバル値は 1500 ミリ秒です。

背景色のアニメーションも遅延するため、色の変更は 1500 ミリ秒が経過した後にのみ開始されます。 rotate および translateY プロパティでは、値が提供されていないため、lay および easing パラメーターのデフォルト値が使用されます。それは彼らにとってローカルな値ではなく、グローバルな値でもありません。

基于函数的参数

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

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

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

类似地，您可以访问目标元素的背景颜色，然后操作它来为各个元素设置最终的唯一颜色值。通过这种方式，您可以对所有元素进行动画处理，使其背景颜色比当前颜色深 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() 方法来执行此操作。正如您所看到的，最终结果没有任何区别。

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