Blog スタッフブログ

JavaScriptで簡単にアニメーションを実装できる「anime.js」

Category | Blog
/ 1,285views

こんにちは、今期オススメのアニメはもちろん「NEW GAME!!」ですが、個人的には「メイドインアビス」や、「賭ケグルイ」も面白くて毎回ドキドキしながら見ています。

さて、Webサイトでアニメーションを使って動きのあるサイトを構築する際に、GPUを使って動くCSSでアニメーションさせるほうがもちろん良いのですが、かゆいところに手が届かなかったり、「こうしたい!」が叶えられない場面がまれにあります。
そんな時はJavaScriptでアニメーションさせてしまったほうが手っ取り早いでしょう。

今回は軽量で簡単にアニメーションが実装できる「anime.js」をご紹介致します。

Table of contents

  1. インストール
  2. 使い方
  3. さまざまなアニメーション
  4. デュレーション・イージング・ディレイ
  5. ループ・ダイレクション
  6. タイムラインの設定
  7. コールバック
  8. 最後に

インストール

まずはインストール方法です。
公式サイトよりダウンロードするか、npmを使ってインストールします。

anime.js

npm install animejs

ダウンロードしたjsファイルをソース内に読み込みます。

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

npmの場合はimportして使いましょう。

import anime from 'animejs'

これで準備は完了です。

使い方

それではアニメーションさせてみましょう。
targetsプロパティにアニメーションさせたい要素を指定します。
エレメントの指定または、”#hoge”などquerySelectorの記述法どちらでも動作します。

anime({
    targets: elem,
    translateX: 250                
  })

クリックすると250px右に移動するサンプルです。

See the Pen jGWppB by Mineo (@min30327) on CodePen.

一つの要素を「A」の次に「B」するといったアニメーションを配列で指定することにより設定できます。

複数のアニメーションを順番に実行

See the Pen XeXPLr by Mineo (@min30327) on CodePen.

さまざまなアニメーション

他にも様々なアニメーションを実装できます。
簡単な例が以下です。

クリックすると消えるアニメーション

See the Pen gGPdGm by Mineo (@min30327) on CodePen.

クリックすると背景が黒になり、角丸が入ります。

See the Pen JrGaWg by Mineo (@min30327) on CodePen.

デュレーション・イージング・ディレイ

アニメーションの長さ(デュレーション)や、開始のタイミング(ディレイ)、アニメーションの動き(イージング)の設定も可能です。

アニメーションの長さ(duration)を10000に設定

See the Pen YrwOaW by Mineo (@min30327) on CodePen.

開始のタイミング(delay)を1000に設定

See the Pen yzexEQ by Mineo (@min30327) on CodePen.

アニメーションの動き(イージング)を”easeOutCubic”に設定

See the Pen xXZaJx by Mineo (@min30327) on CodePen.

詳しいイージングについてはドキュメントをご覧ください。

Easing

ループ・ダイレクション

アニメーションをループさせることも可能です。

ループ

See the Pen MEKPbg by Mineo (@min30327) on CodePen.

繰り返しの設定も指定可能です。directionを’alternate’にすると行ったり来たり、交互にアニメーションします。

Alternate

See the Pen rGxqjV by Mineo (@min30327) on CodePen.

directionを’reverse’にすると通常のアニメーションと反転します。

Reverse

See the Pen oGbaZw by Mineo (@min30327) on CodePen.

タイムラインの設定

anime.jsでは複数の要素を「A」の次に「B」をするというような動きを設定できます。

複数の要素を順番にアニメーション

See the Pen KXVxGG by Mineo (@min30327) on CodePen.

また、offsetを指定することで前のアニメーションが完了する前にアニメーションを開始することができます。

See the Pen oGbajB by Mineo (@min30327) on CodePen.

コールバック

アニメーション完了時に何かしたい場合はcompletedプロパティに指定します。

Callback

See the Pen pWgxKv by Mineo (@min30327) on CodePen.

その他にも様々なコールバック関数が用意されています。

Callbacks

最後に

anime.jsを使えば「こうしたい!」を簡単に叶えられます。
しかもjQueryのようなコールバック地獄からも抜け出せる大変便利なライブラリです。
皆さんも是非使ってみてください!

Category | Blog
Author | Mineo Okuda / 1,285views

Company information

〒651-0087
神戸市中央区御幸通 8-1-6 神戸国際会館 22F

Contact us

WEBに関するお問い合わせは
078-570-5755 (10:00 - 18:00)