どうも、イソップです。
突然ですが、JavaScriptのアニメーションライブラリは何を使っていますか？
最近は、滑らかに動くvelocity.jsやTweenMaxが世界的にも人気です。
ぼくもどちらも試しましたが、非常に使い勝手が良くて、気持ちの良い動きを実装できるライブラリでした。
しかし、ぼくのイチオシは何と言っても、
TweenMaxの軽量版のTweenLiteなんです。
TweenLiteは、TweenMaxの機能を削ぎ落としてファイルサイズを小さくしたライブラリですが、
もちろんそのままでも使えて、プラグインを足せば、イージングやTweenMaxの機能も使えます。
最近個人的に好んで使っていて、DOMアニメーションはもちろんのこと、SVGアニメーションの実装にも大活躍しています。
今日は、そんな溺愛中のTweenLiteを紹介します。
TweenMax、TweenLiteとは
TweenMaxとTweenLiteは、GreenSock社が開発している、JavaScriptアニメーションライブラリです。
Flashの経験がある人は馴染みがあるかもしれません。ActionScript版のライブラリも提供しています。
何と言っても、動きの軽快さが特徴で、個人的にはvelocity.jsより軽く動いてるんじゃないかと思えます。
百聞は一見にしかず。 とにかく公式サイトのショーケースで、実際の動きを観てもらうのが早いです。
Examples & Showcases
どれもこれも秀逸なサイトばかりで、ショーケースに登録してあるサイト全部紹介したくなっちゃいますね！
TweenMax、TweenLiteの違いは？
TweenMaxとTweenLiteの違いは、使える機能の違いです。
DOMアニメーションに必要な機能を持っているTweenMaxに比べて、TweenLiteは最低限のアニメーションの機能しか持ちません。
例えば、JavaScriptのアニメーションではCSSのプロパティを書き換えて動きを表現しますが、
TweenLiteはその機能も持ち合わせておらず、オブジェクトの数値を連続的に変更することくらいしかできません。
なんで、こんなライブラリがイチオシなんだって思いますよね？
実は、公式に用意されているプラグインを使うことで、TweenMaxに近づけてより使いやすくすることができます。
TweenLiteではプラグインが用意されている
プラグインを使えば、CSSの値の書き換え、HTML属性値の書き換え、スクロールポジションのアニメーションなどなど。
必要なものは後から自分で付け足すことが出来ます。
なんか面倒だな、と思った人は、初めからTweenMaxを使いましょう。
用意されているプラグインは以下のとおりです。
- CSSPlugin
CSSプロパティのアニメーションが指定できる。 - CSSRulePlugin
スタイルシートで定義したCSSプロパティをアニメーション可能。:before、:after擬似クラスも変更可能。 - BezierPlugin
ベジェ曲線を使用可能にする。 - AttrPlugin
HTML属性値のアニメーションを可能にする。 - DirectionalRotationPlugin
ローテーションの方向指定を、clockwiseなどのプロパティで指定可能にする。 - TextPlugin
テキストの変更を可能にする。 - ScrollToPlugin
スクロールポジションのアニメーションを指定できる。 - RaphaelPlugin
Raphael（SVG描画ライブラリ）のオブジェクトを扱うことができる。 - ColorPropsPlugin
カラーコードの変換を可能にする。 - EaselPlugin
CreateJSのEaselJSのプロパティを扱うことができる。 - RoundPropsPlugin
アニメーション中の値を、四捨五入するプラグイン。 - ModifiersPlugin
定義したカスタム関数を、アニメーションサイクルのタイミングで実行する。
※TweenMaxには、上記のColorProps,CssRule,Easel,ScrollTo,Modifiers,Textプラグインは含まれていません。
ぼくがTweenLiteをオススメする理由
ぼくがTweenLiteをオススメする理由は、もちろんファイルサイズを抑えることができること。
使わない機能が多いことが許せないので、自分の好きなように機能を追加できるのがメリットだと思っています。
ファイルサイズの違いは、TweenMaxが112KB、TweenLiteが28KBと軽量です。（圧縮済みコード）
最近は、読み込み速度などにも気を使う場面が増えてきたので、TweenLiteが使いやすいわけです。
まとめ
ざっと簡単な説明でしたが、いかがでしたか？
次回から連載形式で、TweenLiteを使ったアニメーションの実装方法を紹介していこうと思いますので、お楽しみに。