Anime.jsのアニメーション速度を調整する方法

2024-02-08 08:45 Anime.jsJavaScriptアニメーション速度

Anime.jsはJavaScriptで作成された軽量なアニメーションライブラリであり、ウェブサイトやアプリケーションで動きのある要素を作成するのに便利です。アニメーションの速度を調整するには、Anime.jsの組み込みの機能を使用することができます。

以下に、アニメーション速度を調整するためのいくつかの方法とコード例を示します。

  1. durationプロパティを使用する方法: Anime.jsのアニメーションオブジェクトには、durationというプロパティがあります。これはアニメーションの実行時間をミリ秒単位で指定します。デフォルトでは、アニメーションは1秒間で実行されます。例えば、以下のコードではアニメーションの実行時間を2秒に設定しています。
anime({
  targets: '.element',
  translateX: 250,
  duration: 2000 // 2秒
});
  1. easingプロパティを使用する方法: easingはアニメーションの進行速度を制御するためのプロパティです。Anime.jsには多くの組み込みのeasing関数があります。例えば、linear、easeInQuad、easeOutElasticなどがあります。以下のコードではeaseOutElastic関数を使用してアニメーションの速度を調整しています。
anime({
  targets: '.element',
  translateX: 250,
  duration: 1000,
  easing: 'easeOutElastic' // easing関数の指定
});
  1. delayプロパティを使用する方法: delayプロパティは、アニメーションの開始を遅延させるためのプロパティです。ミリ秒単位で指定され、アニメーションが開始する前に指定した時間待機します。以下のコードでは、アニメーションの開始を1秒遅らせています。
anime({
  targets: '.element',
  translateX: 250,
  duration: 1000,
  delay: 1000 // 1秒の遅延
});

これらは、Anime.jsでアニメーションの速度を調整するためのいくつかの基本的な方法です。詳細なドキュメントや他のオプションについては、Anime.jsの公式ウェブサイトやドキュメンテーションを参照してください。