Anime.js を使用した JavaScript ベースのアニメーション、パート 3: 値、タイムライン、および再生の探索

Anime.js シリーズの前のチュートリアルでは、さまざまなターゲット要素のアニメーション方法を制御するさまざまな種類のパラメーターについて学びました。また、関数の引数を使用して要素の遅延や継続時間を徐々に変更する方法も学びました。

このチュートリアルでは、さらに一歩進んで、通常の数値、関数ベースの値、およびキーフレームを使用してプロパティ値自体を指定する方法を学習します。また、タイムラインを使用してアニメーションを順番に再生する方法も学習します。

属性値を指定します

Anime.js を使用すると、ターゲット要素のアニメーション化可能なプロパティの最終値を指定できます。アニメーションの初期値または開始値は、プロパティのデフォルト値です。 CSS で指定された任意の値を開始値として使用することもできます。最終値を指定するにはいくつかの方法があります。

単位のない数値にすることもできます。この場合、プロパティ値を計算する際には、プロパティの元の単位またはデフォルトの単位が使用されます。値を文字列として指定することもできますが、その文字列には少なくとも 1 つの数値が含まれている必要があります。文字列値の例は、10vh、80%、および 9.125turn です。

絶対値を指定する代わりに、現在の値に対する相対的な属性値を指定することもできます。たとえば、値として =150px を使用して、最終的な translateY 値を現在の値 150px よりも大きくすることができます。相対値を指定する場合は、加算、乗算、および減算のみを使用できることに注意してください。

カラーをアニメーション化する場合、赤、黒、青などのカラー名を使用してアニメーションの最終的なカラー値を設定することはできません。この場合、カラー アニメーションはまったく発生せず、変更は瞬時に行われます。カラーをアニメーション化する唯一の方法は、値を 16 進数または RGB および HSL 値として指定することです。

ターゲット要素をアニメーション化するための初期値を指定していないことに気づいたかもしれません。 Anime.js は、CSS とこれらのプロパティのデフォルト値に基づいて初期値を自動的に決定します。ただし、配列を使用して、プロパティのデフォルト値以外の初期値を指定できます。配列の最初の項目は初期値を表し、2 番目の項目は最終値を表します。

すべてのターゲット要素に同じ最終値を使用する代わりに、関数を使用して異なるパラメーターに異なる値を設定できます。このプロセスは、関数ベースのプロパティ パラメーターを指定する場合と似ています。

translateY 属性の場合、要素のインデックスを使用して翻訳値を設定します。 50 * (i 1) を使用すると、各要素の translateY 値が 50 ピクセルずつ増加します。

スケーリング アニメーションでは要素のインデックスも使用され、組み込みの Math.random() 関数は 1 未満の浮動小数点疑似乱数を返します。この方法では、要素はランダムにスケールされますが、属性の i/10 部分により、最終的に要素のサイズが大きくなる可能性がわずかに増加します。

回転アニメーションのコードでは、anime.random(a, b) ヘルパー関数を使用して、-180 ～ 180 の範囲のランダムな整数を取得します。この関数は、translateY や rotate などのプロパティにランダムな値を割り当てるのに役立ちます。この関数を使用してランダムなスケール値を割り当てると、極端な結果が得られます。

さまざまな要素の境界半径の値は、el 関数パラメータを使用してターゲット要素の幅を計算することによって決定されます。最後に、コードの最後の部分でも、duration パラメーターと Delay パラメーターにランダムな値を割り当てます。

最後の部分で実装されたアニメーションは非常にランダムであることがわかります。要素のさまざまな属性値、またはその遅延値と期間値の間には関係はありません。現実では、アニメーションに方向感を追加する値を使用する方が賢明です。

キーフレームを使用して、ターゲット要素のさまざまなプロパティをアニメーション化することもできます。各キーフレームにはプロパティ オブジェクトの配列が含まれています。このオブジェクトを使用して、アニメーションのその部分のプロパティ値 duration、delay、および easing を指定できます。次のコードは、キーフレームベースの変換アニメーションを作成します。

すべてのパラメータに異なる値または同じ値を指定することで、複数のプロパティを一度にアニメーション化することもできます。 2 番目のケースでは、グローバル delay パラメーターは、インデックスに基づいてすべての要素に初期遅延を適用します。この遅延は、キーフレーム内の各プロパティに適用される遅延とは無関係です。

创建和操作时间线

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

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

以上がAnime.js を使用した JavaScript ベースのアニメーション、パート 3: 値、タイムライン、および再生の探索の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。