MD-Blog_Web Creative

どうも、フロントエンドエンジニアのスギヤマです。

前回のBarba.jsの記事でその末尾で anime.js について触れましたが、今回はその anime.js について jQuery のアニメーションと比較して書いていきたいと思います。

jQueryはアニメーション以外のものも含まれているのであまり比較にならないですが、同じアニメーション系のライブラリ「Velocity.js」と比べても anime.js の方が軽いですね。

jquery.min.js : 87 KB程度
velocity.min.js : 34 KB程度
anime.min.js : 9 KB程度

では、おなじみのjQueryから。

jQuery

ダウンロード

jQuery本体をダウンロードします。

使い方

[html]

Hello!

[css]

.block__hello {
  width:100px; 
  border:1px solid #000;
  padding: 1em;
  font-size: 1em;
}

[pjax.js]

$("#data-hello").on('click',function(){
  $(this).animate({ 
    width: "200px",
    fontSize: "2em"
  }, 1500,'linear');
});

簡単ではありますが【Hello!】部分クリックすると、width、font-sizeがアニメーションします。
animateの関数を使用しますがアニメーション後のCSSプロパティを配列で渡し、duration（アニメーション秒数）をミリ秒または"fast","slow"などで指定、イージングの指定をすることができます。

ノーマル状態でイージングは「linear」と「swing」の2つが用意されていますが別途イージングのjQueryプラグインを読み込むことで様々なイージングを指定することもできます。

anime.js

anime.jsのサポートブラウザはモダンブラウザ＆IE10〜。

ダウンロード

anime.js本体をダウンロードします。

使い方

※上のhtml,css を使用するとします。

[javascript]

var hello = anime({
  targets: '#data-hello',
  width: "200px",
  fontSize: "2em"
  duration: 300,
  loop: false,
  direction: 'normal',
  easing: 'linear'
});

targetsプロパティはどの要素をアニメーションにするのかを指定します。上の例のようにCSSセレクターを使って指定もできますし、以下に挙げる方法でも可能です。

DOM要素で指定 -- 例：document.querySelector('#data-hello')
Nodelistで指定 -- 例：document.querySelectorAll('#data-hello')
JavaScriptのオブジェクト -- 例：{elementName: 'data-hello'}
JavaScriptの配列 -- 例：['#data-hello']

もしtargetsプロパティに2つ以上の要素を入れたアニメーションを考えているのなら、配列を使えば可能です。

var bouncingBall = anime({
  targets: ['#data-hello', '#data-world'],
});

loopプロパティはアニメーションを何回繰り返すかを指定します。デフォルトの値はfalseで、1回だけアニメーションします。trueにすればアニメーションを無制限に繰り返し、任意の数をセットすれば実行回数を指定できます。

directionプロパティはCSSアニメーションと同様に用意されており、CSSにあるnormal（普通方向の再生）、reverse（逆方向の再生）、alternate（奇数回では普通方向の再生、偶数回では逆方向の再生）と同じように指定できます。

easingプロパティはアニメーションの変化率を指定しますが、anime.jsにはjQueryのように別途プラグインを読み込まなくてもeaseInExpo、easeOutCircなど様々なeasingがはじめから用意されています。

まとめ

例に挙げたとおりanime.jsでもjQueryのanimate()とほぼ変わらない感じで実装ができます。むしろeasingがはじめから組み込まれているので便利です。

アニメーションを実装するだけでjQueryを読み込むのであればanime.jsを使用する方が良さそうです。