Edited at

アニメーションライブラリ決定版か!?anime.jsで軽量・軽快に実装!

More than 1 year has passed since last update.

少し前に、アニメーション最強の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は最強じゃなくなったか・・・)

ぜひ、アニメーションさせるようなページにご活用いただければと思います。


参考URL