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'}); };
くらいやる気概が必要です。
参考
いいスライドあったので載せておきます。
記法もそこまで変わらないので、今後animateやらfadeInやら書くことあれば、迷わず投入しようと思ってます。
あとがき
jQuery先輩には本当に助けてもらってるんですけど、パフォーマンス絡みの話になるとすぐ槍玉に挙げられるのが・・。
そろそろ我々は親離れならぬjQuery離れをせねばならんのかね。(今に始まった話ではないか。)
あとこういう良い代替ライブラリ見つけても、だいたいソースみると if (IE) とか書いてあってげんなりするんですよね。
モバイル特化のそういうライブラリ群、あったら需要あると思うんやけどなー。