🧊

jQuery, GSAP, Velocity.jsのfadeIn/fadeOutの記法を比べる

fadeInって聞くと、あぁjQueryねってなるくらいには浸透してると思うのですが、
あれはパフォーマンスがよろしくないとのこと。

であれば代替に何があるの？ってことで、
その代替ライブラリたちとその書き方のご紹介。

書き比べ

No.0: jQuery

$div.fadeIn(500, onFadeIn);
$div.fadeOut(500, onFadeOut);

みじかい。さすが。

No1: TweenMax

TweenMax.to($div, 0.5, { alpha: 1, display: 'block', onComplete: onFadeIn });
TweenMax.to($div, 0.5, { alpha: 0, display: 'none', onComplete: onFadeOut });

ふむ。

No2: TweenLite

TweenLite.to($div, 0.5, { alpha: 1, display: 'block', onComplete: onFadeIn });
TweenLite.to($div, 0.5, { alpha: 0, display: 'none', onComplete: onFadeOut });

ちなみにMaxとLiteの違いは、

TweenMax extends TweenLite, adding many useful (but non-essential) features like repeat(), repeatDelay(), yoyo(), updateTo(), and more.

らしいので、このtoメソッドに関しては同等なんやろなーと。

No3: Velocity.js

Velocity($div, { opacity: 1 }, { duration: 500, display: 'block', complete: onFadeIn });
Velocity($div, { opacity: 0 }, { duration: 500, display: 'none', complete: onFadeOut });
// ちなみにこうも書ける
Velocity($div, 'fadeIn', { duration: 500, display: 'block', complete: onFadeIn });
// ちなみにjQueryいればこうも
$div.velocity('fadeIn', { duration: 500, display: 'block', complete: onFadeIn });

元よりjQueryの記法互換で作られてるらしいので、受け入れやすさは一番やと思います。
jQueryに依存してるわけではないです。

肝心のパフォーマンス

jsperfにサンプル作って上げたはいいものの、毎回途中で止まっちゃって、定量的な結果はわからず。
ただ手元のAndroidちゃんで見る限り、jQueryよりVelocityのが圧倒的にスムーズでした。

Velocity.js

ちょっとした注意

display

上記の例でも書いてますが、displayを指定しないと、opacityしか変わりません。
jQueryはshow/hideの拡張的な感じなので、displayも変わります。

style="opacity:0"が残る

どういうことかというと、

// コレやると
$div.velocity('fadeOut').show();

// <div style="opacity: 0; display: block;" /> になるので
// opacity: 0のままなので見えない

こんな具合にjQueryと共生する感じにいきたいなら、

$.fn.show = function() { return this.css({opacity: '', display: 'block'}); };

くらいやる気概が必要です。

参考

いいスライドあったので載せておきます。

参考：Velocity.js is next generation animation engine.

記法もそこまで変わらないので、今後animateやらfadeInやら書くことあれば、迷わず投入しようと思ってます。

あとがき

jQuery先輩には本当に助けてもらってるんですけど、パフォーマンス絡みの話になるとすぐ槍玉に挙げられるのが・・。
そろそろ我々は親離れならぬjQuery離れをせねばならんのかね。(今に始まった話ではないか。)

あとこういう良い代替ライブラリ見つけても、だいたいソースみると if (IE) とか書いてあってげんなりするんですよね。
モバイル特化のそういうライブラリ群、あったら需要あると思うんやけどなー。