Help us understand the problem. What is going on with this article?

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

More than 3 years have 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

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away