軽量アニメーションJavascriptライブラリ【anime.js】を使ってみた

Anime.jsは、CSSプロパティ、SVGやDOM要素の属性、JavaScriptオブジェクトを使用して動作するJavaScriptのアニメーションライブラリです。

jQuery依存もないため、このライブラリを読み込むだけでアニメーションを実装することができます。

ライセンスはMITライセンスです。

https://animejs.com/

その他、Javascriptのアニメーションライブラリは以下をご参考にしてください。

【2020年版】JavaScriptアニメーションライブラリ5選

anime.jsの使い方

導入方法

以下からライブラリをダウンロードします。

https://github.com/juliangarnier/anime

lib/anime.min.js　を使用します。

HTMLでanime.jsを読み込ませます。

<script src="js/anime.min.js" defer></script>

jsを読み込むタイミングはHTMLパース後になるように「defer」属性を使用します。

基本的な使用方法

基本的な使い方として、①要素を選択 ②アニメーションを設定 ③タイミング&時間を設定します。

以下、サンプルコードです。

anime({
  targets: ".anime01",
  translateX: 250,
  duration: 3000,
});

この場合、クラス名「anime01」の要素を「3000ms」かけて、X方向に「250px」移動します。

デフォルトではアニメーションにバウンドがついています。 easingを追加することで変更することができます。

anime({
  targets: ".anime02",
  translateX: 250,
  duration: 1500,
  easing: "easeInOutQuad",
});

以上で基本的な使用方法は終わりです。 詳しいオプションやサンプルは以下で確認できます。

https://animejs.com/documentation