知ってた?ナルホド! BLOG

2021.01.09

anime.jsライブラリでアニメーション作成!

WRITTEN BY

 | 

HIRAHARA NATSUMI

こんにちは!コーダーの平原です!
現代のWebサイトでは、ユーザーに視線誘導を促したり、デザインのポイントとして、
様々なアニメーションが使われています。

アニメーションの実装はJavaScript、JQuery、CSSなど色々な方法がありますが、
今回は、簡単に滑らかなアニメーションを実装することができる「anime.js」ライブラリをご紹介します。

  1. anime.jsとは
  2. 導入方法
  3. 作成したアニメーション
  4. まとめ

1. anime.jsとは

anime.jsは、JavaScriptのアニメーションライブラリです。
CSSやSVGなどを操作することもでき、様々なイージングを使用できます。ファイルサイズが18KBくらいと、軽量なのも嬉しいですね。

2. 導入方法

まずは、公式サイトから必要ファイルをダウンロードします。
https://animejs.com/

使用するのは、「anime.min.js」と「animejs.css」です。
こちらをHTMLに読み込みます。

そして、アニメーションさせたいターゲットを指定して、パラメータにアニメーションを調整するプロパティなどを設定して実装します。
今回詳しい設定方法などは割愛しますが、公式サイトのドキュメントや、それを日本語に翻訳したサイトなどがあったので、ご紹介させていただきます。

公式サイトのドキュメント
https://animejs.com/documentation/

anime.jsを日本語翻訳してくれているサイトもありました。
https://tr.you84815.space/animejs/

3. 作成したアニメーション

こちらが、ドキュメントを元に作成したアニメーションです。
公式サイトのドキュメントの「STAGGERING:GRID」を元に、回転などを加えたもの。

SVGアニメーションも簡単に実装できます。少しわかりにくいですが丑です。

4. まとめ

見て楽しい。作って楽しい。そんなアニメーションが簡単に作れて、しかも軽い!という良いことづくしのanime.jsライブラリ。
Webサイト制作でも活躍してくれそうです!

PAGE TOP