GreenSockのアニメーションライブラリがJavaScriptに対応!
週末行った温泉で受けた整体マッサージがすごく良かったので近場で行きつけにできる店を探しているminamiです。
GreenSock の一連のアニメーションライブラリといえば、Flashではだいぶお世話になっていましたが、Version 12でJavaScriptでも展開を始めていたようです!
以下のクラスが提供されています。AS3 / AS2 で使用できるTweenNanoは今回提供されていないようです。
- TimelineLite
- TimelineMax
- TweenLite
- TweenMax
基本的な書式はAS版と変わりません。TweenLiteの場合は以下のようにアニメーションを指定します。もちろんdelayやeaseなどのパラメーターも使えます。イージングのバリエーションを増やすには \src\uncompressed\easing\EasePack.js を別途読み込んでおきます。
TweenLite.to(
document.getElementById("test"), // アニメーション対象のDOM
2, // アニメーション実行の秒数
{ width:200, height:150 } // アニメーションプロパティ
);
サンプルをさわってみる
カルーセル処理のサンプル。グリグリ動きます。
跳ねるボールのサンプル。TimelineLite を使うことで複雑なシーケンスも簡単に記述できます。
タイプした文字がバラバラに崩れるアニメーション
スピードテストのサンプル。他のライブラリとの比較もできます。
速さを売りにしているだけあって、パフォーマンスはかなり良いようです。以前からActionScriptでTweenMaxを使ってアニメーションを作っていた人にも嬉しいアップデートではないでしょうか。
有料コンテンツを含むサイトでの使用にはライセンスに注意が必要なようです。