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

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

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

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

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

anime.jsの使い方

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

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'
});

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