【Anime.js入門】軽量で、美しいアニメーションJavaScriptライブラリの使い方

最近「jQueryはもう必要ない」という話をよく聞くようになりました。

ただし本格的にReactやVueを使うほどではなく、ちょっとした実装がしたいなと思った時に、単体で読み込むだけで利用でき便利なのが、軽量でシンプルな「マイクロライブラリ」です。

「Anime.js」は、美しいアニメーションを、軽く、高速、かんたんに実装できるJavaScriptライブラリです。

概要

Anime.jsの特徴

公式サイト：https://animejs.com/

jQuery依存もなく、

このライブラリだけ読み込めば、アニメーションがすぐ実装できます。

他のアニメーション方法との比較

もちろん、Anime.js以外でもアニメーションは可能です。ざっくり比較検討結果です。

CSS実装（静的なアニメーション向き）

・CSSのアニメーションでかんたんに実装。

・各ブラウザのサポートがまちまちなので管理が大変。

・HTML以外の、SVGなどは別の制御が必要。

JavaScript実装（動的・高度なアニメーション向き）

・動的な制御、HTML以外のCanvas、SVGなども使う場合、JavaScriptが最適。
・クロスブラウザのサポート差を吸収してくれる。

Anime.js vs 他ライブラリ比較

・GreenSock、Velocity.jsなども有名どころです。
・その中でも、anime.jsは軽量ライブラリでした。（16.9 KB / GitHub）

今回は、軽量で、かんたんに導入できる「Anime.js」をご紹介していきたいと思います。

Anime.js 使い方

導入方法

HTMLの場合

公式サイトからダウンロードします。
https://github.com/juliangarnier/anime/

・GitHubの「Download」から.zipをダウンロードできます。
・解凍すると、ディレクトリの/libの中の「anime.min.js」を使います。

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

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

Node.jsの場合

$ npm install animejs

もしくは

$ bower install animejs
$ import anime from 'animejs'

でインストールします。

Anime.jsの使い方 – サンプル

公式ドキュメントはこちらです。
https://animejs.com/documentation/

ソースコード（サンプル）

いちばん、かんたんな「左→右にアニメーション」するサンプルから試してみます。

HTML（サンプル）

    <div class="wrapper">
      <div class="square" id="elem"></div>
    </div>

HTMLは、なんでも大丈夫です。

ここでは

「id=”elem”」をアニメーションさせたい要素

「class=”square”」を正方形の見た目を指定するCSSクラス

としています。

CSS（サンプル）

.square{
  background-color: #1fc3cd;
  width: 60px;
  height: 60px;
  cursor: pointer;
}

CSSも特に指定するものはありません。

ここでは”.square”に正方形の見た目の指定と、クリックするとアニメーション開始がわかるように、マウスオーバー時のカーソルの指定をしています。

JavaScript（左→右へアニメションの基本）

var elem = document.getElementById('elem');
elem.addEventListener('click',function(){
  anime({
    targets: elem,
    translateX: 250
  })
})

anime({　});の部分が、anime.jsの指定です。

今回は、この2つを指定しています。

これで、正方形をタップすると、左から右へ250px動くようになります。

他には、どんなアニメーションができるの？

こちらの公式ドキュメントに、可能なアニメーションの仕方がサンプル付き一覧になっているので、参考になりました。

https://animejs.com/documentation/

anime({　});の中身を指定するだけでも、いろんなアニメショーンが表現できます。

高度なアニメーション

こちらにサンプルが投稿されているので、いい動きや面白い動きがあったら研究すると良いと思います！

https://codepen.io/collection/XLebem/

まとめ

jQuery依存もなく、ライブラリだけ読み込めば、美しいアニメーションを、軽く、高速、かんたんに実装できるJavaScriptライブラリ「Anime.js」をご紹介しました。

適切なアニメーションは「ユーザーの認知・学習効果を高める」と言われています。

やりすぎは逆効果ですが、伝えたいことを、動きを加えることで、よりナチュラルに表現できるようになっていきたいです。

そのための入門用としても、実践編としても、最適なライブラリだと思いました。

【関連書籍】