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

aminejs

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

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

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

概要

Anime.jsの特徴

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

【Anime.jsの特徴】

✔️柔軟で、軽い、アニメーションが多彩。

✔️CSS、SVG、DOM、JavaScriptに対応。

✔️対応ブラウザが広い。

✔️jQuery依存しない。(ライブラリ読み込むだけ)

✔️商用利用できる。(MITライセンス

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の指定です。

tagets: elemアニメーションさせる対象の
エレメントを指定します。
今回は”id=elem”要素
translate X: 250:X軸方向(横スライド)に
250px移動させる指定です。

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

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

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

anime.js Documentation

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

https://animejs.com/documentation/

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

高度なアニメーション

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

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

まとめ

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

【Anime.jsの特徴】

✔️柔軟で、軽い、アニメーションが多彩。

✔️CSS、SVG、DOM、JavaScriptに対応。

✔️対応ブラウザが広い。

✔️jQuery依存しない。(ライブラリ読み込むだけ)

✔️商用利用できる(MITライセンス)

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


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

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

【関連書籍】

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA