本文へジャンプ

脱jQuery!?、anime.js使ってみた。

Posted by kenta sugiyama

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

前回の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を使用する方が良さそうです。

FRESHERS WANTED!
Recent Entries
MD EVENT REPORT
What's Hot?
日本各地の酒蔵との直取引により厳選して仕入れた日本酒を世界に販売
こんな僕たちの仲間に入りませんか?
Movable Type AWS 移管&アップグレード サービス
SNS・ブログ・メールからの流入数が一目でわかる
50,000円からのシネマグラフ(Cinemagraph)制作
TAKUYAが教えるギター・レッスン
KenKenが教えるベースギター教則アプリ
SNS連動型クチコミ拡散システム「レビュー ジェネレーター サービス」
1時間1万円の撮影スタジオ
すべてのコンテンツ/プラットフォームを、ひとつのコンテンツ管理システムで。
Share this on
Facebook Twitter Google+