イナヅマTVログ

JavaScript Tween Engine, TweenMax / TweenLite の光と影 – 使うけど

| 0件のコメント

JavaScriptのTween Engine選定は迷う。
今までそんなに必要なかったもんな〜
jQuery.animateで足りてたし。

HTML+JavaScriptでFlashなみに動きを求められるとjQueryだと物足りない、もうちょい機能が欲しいところ。

ActionScriptには数々のTween Engineが存在します。
その中の一つGreenSockのTweenMax / TweenLiteにJS版ができたと聞き使ってみました。

Announcing GreenSock Animation Platform (GSAP) v12, now with tangy JavaScript flavor!
Jump Start: GSAP JS

簡単、軽快
すぐに使い始められる。
Tweenの対象がJavaScript Object, DOMElement, jQuery Instance…と豊富
onStart, onUpdate, onComplete…などのコールバック機能が充実
他にも良い点は数えきれないほどです。

AS版を使用したことがあったら、読込んですぐに使い始められます。
TweenMaxを使ったことがなくてもTween Engineの使用経験があれば良いでしょう。
初めてでも短時間で使えるのは何よりの魅力です。

名前空間汚染し過ぎではないでしょうか
名前空間の使い方が理解できません。

グローバルの com.greensock 配下にClassがずらーっと用意されています。
TweenMax, TweenLite の主要クラス使用は下記の様になります。

var TweenMax = window.com.greensock.TweenMax;
var TweenLite = window.com.greensock.TweenLite;

階層は深いですが、JavaScriptの性質を考えると理解できます。
階層が深すぎると考えたのかどうなのか分からないのですが、全てのクラスはwindow直下のグローバル領域にも再配置されています。

window.TweenMax, window.TweenLite だけならまだしもeasing関連のクラスも全てです。

例えば、easing関数の中の一つ
window.Bounce
配下にeaseIn, easeOut, easeInOutの関数があります。

それとは別にwindow.BounceIn, window.BounceOut, window.BounceInOut もご丁寧に用意されています。
同様に全てのクラス、メソッドがグローバル領域に存在します。

利便性は上がるのかもしれませんが、ここまで来ると無神経すぎないかと不安になってきます。

もうちょっと遠慮してくれたら良いのに。
とっても使い勝手の良いライブラリなので残念だと思いました。

コメントを残す

必須欄は * がついています