こんにちは、店長です。みなさん、アニメーションの実装はどのようおこなっていますか？
今回はanime.jsというアニメーションライブラリを使ってみたのでご紹介したいと思います。
anime.jsはCSSやタグの属性、SVGやオブジェクトの値を操作することができます。そしてなんといってもとっても軽い！
そこで他のアニメーションライブラリとファイルサイズを比べてみました。
| ライブラリ | 容量 |
|---|---|
| Tween.js v.0.6.2 | 103 KB |
| TweenMax v.1.19.0 | 347 KB |
| TweenLite v.1.19.0 | 31.9 KB |
| anime.js v1.1.0 | 19.9 KB |
| anime.js v1.1.0（minify） | 9.21 KB |
Tween.jsや、以前づやさんが紹介していたTweenMaxと比べるとだいぶ軽量ですね。
もちろん他のライブラリと比べるとできることに限りはありますが、それでも表現豊かなアニメーションを簡単につけることができます。実際に私もこんなデモを作ってみました。
See the Pen anime.js Sample – demo by Yusuke Omi (@Im0-3) on CodePen.
使い方はかなりシンプルなので、覚えれば簡単にアニメーション出来ますよ！ライブラリのサポートブラウザは以下の通りです。
- Chrome
- Safari
- Opera
- Firefox
- IE 10+
IEは10以上の対応です。ではさっそく、使い方を見てみましょう。
anima.jsを実際に触ってみよう！
まずはとりあえず動かしてみましょう。ボールが上に移動するアニメーションもたったこれだけで書くことができます！
See the Pen anime.js Sample – From To values by Yusuke Omi (@Im0-3) on CodePen.
基本的な使い方はターゲットを指定して、変化させたい値と、どうアニメーションさせるかというプロパティを指定するだけです。プロパティについて、ひとつずつ見ていきましょう。
targets
targetsにはアニメーションさせたいエレメントを指定します。これは、以下の方法で指定することが出来ます。
| 種類 | 例 |
|---|---|
| CSSセレクタ | '.ball', '#container' |
| DOMエレメント | document.querySelector('#container') |
| Nodeリスト | document.querySelectorAll('.ball') |
| 配列 | ['.ball', '#container'] |
またtargetsにはオブジェクトを渡すことができます。例えばこんな風に、イージングに合わせて値を変化させることができます。
See the Pen anime.js test – object properties by Yusuke Omi (@Im0-3) on CodePen.
アニメーションできるパラメーター
| 種類 | 例 |
|---|---|
| CSSプロパティ | width, backgroundColor, 'border-radius'など |
| CSS Transformで扱うことのできるプロパティ | tranlateX, scale, rotateなど |
| SVGの属性 | d, rx, transformなど |
| タグの属性 | value, volumeなど |
| オブジェクトの値 | オブジェクトのkeyを指定できる |
変化させる値は数値だけでなく、pxや%、rem、vwなどの単位付きの値を渡すこともできます。
その他のパラメーター
その他アニメーションを調整するためにさまざまなプロパティが用意されています。
| 名前 | デフォルト値 | |
|---|---|---|
| delay | 0 | アニメーションするタイミングをミリ秒で指定 |
| duration | 0 | アニメーションする長さをミリ秒で指定 |
| autoplay | true | 実行した際に自動でアニメーションを再生するか指定 |
| loop | false | アニメーションを繰り返すかどうか指定できる。 |
| direction | 'normal' | アニメーションを再生方向を指定。'normal', 'reverse', 'alternate'のいずれかを指定できる |
| easing | 'easeOutElastic' | イージングを指定できる。使用できる種類はconsole.log(anime.easings)で確認できる |
| elasticity | 400 | アニメーションの弾み具合を調整できる。大きくするほど弾むようなアニメーションになる |
パラメーターごとにアニメーションを調整する
次はアニメーションさせたいパラメーターごとに調整していってみましょう。
各プロパティごとに目標とする値と、duration、delay、easingを指定することができます。以下がその例です。
See the Pen anime.js sample – Specific animation parameters by Yusuke Omi (@Im0-3) on CodePen.
translateYとrotateYをそれぞれ、個別に設定し、ボールが上昇した後にクルッと回るアニメーションをつけてみました。
パラメーターの開始と終了の値を指定する。
開始と終了の値を指定する場合は配列を渡してあげます。0番目が開始の値、1番目が終了の値です。
See the Pen anime.js Sample – From To values by Yusuke Omi (@Im0-3) on CodePen.
特定のエレメントの値を扱う
targetsで指定したエレメントが複数存在する場合は、関数を渡すことで、各エレメントごとに値を指定することができます。
第一引数には、処理するターゲットが、第二引数にはそのターゲットのインデックス番号が入ります。関数の戻り値がそのターゲットの値となります。
See the Pen anime.js Sample 1 Specific target values by Yusuke Omi (@Im0-3) on CodePen.
アニメーションの再生、停止を制御する
anime.jsではアニメーションの再生・停止の制御だけでなく、アニメーションの進捗度に合わせた表示も可能です。
| 名前 | デフォルト値 |
|---|---|
| .play() | アニメーションを再生する |
| .pause() | アニメーションを停止する |
| .restart() | アニメーションを再び最初から再生する |
| .seek() | アニメーションの進捗度にあわせて表示をする。0 ~ 100の間で値を渡す |
See the Pen anime.js Sample – Multiple timing values by Yusuke Omi (@Im0-3) on CodePen.
パスでアニメーションする
SVGのパスに沿ってターゲットをアニメーションさせることも可能です。
アニメーションさせたいパスを取得する際はanime.path()という関数を使用します。引数に取得したいパスオブジェクトを指定します。
anime.path()で取得したパスオブジェクトは、translateX、tranlateY、rotateの３つのプロパティを変更することが可能です。
See the Pen anime.js Sample – Path Animation by Yusuke Omi (@Im0-3) on CodePen.
まとめ
いかがでしたでしょうか。扱いが簡単で、イージングが豊富に用意され、かつバウンドも調整できるので、かなりいきいきとしたアニメーションがつけやすいです。
複雑な動きになってくると他のものが良い場合もありますが、まずは簡単にアニメーション付けてみたいという方は、ぜひ使ってみてくださいね！
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
