少し前に、アニメーション最強のVelocity.jsの使い方という記事を書きましたが、対抗馬となるanime.jsが出てきたので使ってみました。
anime.jsとは？
高機能かつ軽快なアニメーションする軽量ライブラリです。
Velocity.jsと違い、jQueryの$.animateと互換性はありませんが、記述方法が分かりやすくカンタンに導入できると思います。
なお、アニメーションは、Velocity.jsと同様にrequestAnimationFrameベースで動作させており、スムーズにアニメーションされます。
容量
Velocity.jsと比べると、anime.jsの方が軽いですね。
- velocity.min.js : 34.4 KB
- anime.min.js : 9.21 KB
記述方法
はい、これで動きます。（右に100px移動）
カンタンですね。
anime({
targets: 'i',
translateX: '100px'
});
targetsには、CSSセレクタと同様の記述ができ、IDやClass指定もできます。
また、以下のようにDOMを渡しても大丈夫です。
anime({
targets: document.querySelector('i'),
translateX: '100px'
});
パラメーター
以下を指定していくことでアニメーションの細い設定ができます。
※主要のものだけ記載
| 名前 | デフォルト | 説明 |
|---|---|---|
| delay | 0 |
遅延時間 |
| duration | 1000 |
アニメーション時間 |
| autoplay | true |
自動再生するかどうか |
| loop | false |
ループ再生するかどうか |
| direction | 'normal' |
'normal', 'reverse', 'alternate'のうちから再生方向を指定 |
| easing | 'easeOutElastic' |
イージング。http://easings.net/ja を参考するといいよ |
| begin | undefined |
アニメーション開始時に実行したいこと |
| update | undefined |
アニメーション中に実行したいこと |
| complete | undefined |
アニメーション終了時に実行したいこと |
使用できるCSSプロパティ
width, borderRadius, 'background-color'など
使用できるCSS Transform
translateX, rotate, scaleなど
記述例
anime({
targets: 'i', // 対象を指定
scale: {
value: 2, // 2倍サイズになる
duration: 500, // 0.5秒間アニメーションする
easing: 'easeOutQuad'
},
translateY: {
value: [0, 200], // []で開始値と終了値を指定できます
delay: 500, // 0.5秒後に実行
duration: 3000, // 3秒間アニメーションする
easing: 'easeInBounce'
},
begin: function(){
console.log('アニメーション始まったよ');
},
update: function(){
console.log('アニメーション中');
},
complete: function(){
console.log('アニメーション終わったよ。お疲れ様でした');
},
direction: 'alternate', // 逆再生させアニメーションサイクルさせる
loop: true // ループさせる
});
他にも、再生・停止などの制御ができたり、また凄いのがSVGのパスに合わせてアニメーションさせたりできます！
詳しくは、公式ページを見てみてください。
最後に
今までアニメーションライブラリーはVelocity.jsをよく使っていましたが、anime.jsの方が記述が分かりやすく書け、ファイル容量も軽量なため、今後はanime.jsの方が有力だなと思いました。
（Velocity.jsは最強じゃなくなったか・・・）
ぜひ、アニメーションさせるようなページにご活用いただければと思います。