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

  • 29
    いいね
  • 0
    コメント

少し前に、アニメーション最強の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