TweenMAXはFlashの時代からある息の長いモーションライブラリです。
高速度高機能でCanvasやWebGLなんかにも併用できるため、やや込み入ったアニメーションを実装したいときに便利そう。僕はまだ簡単なやつは手っ取り早くjQueryでやってしまうことも多いですが、徐々にこういうのを使いこなせるようになりたいなと…。
あらゆることが出来るTweenMAXですが今回はとっかかりとして基本的なところを紹介しようと思います。
用意するもの
まずはGreenSock公式からファイル一式をダウンロードします。最低限必要なものはとりあえず下記の1ファイルのみとなります。
<script src="TweenMax.min.js" type="text/javascript"></script>
TimelineMaxはまた別として、実装したい内容によっては軽量簡易版であるTweenLiteでもいいとは思います。
基本的な使い方
アニメーションの基本設定は下記のように書きます。
このようにjQueryと同じに#や.を使った書き方も出来るし、getElementById等で取得した要素を指定することもできるようです。
ちなみに秒数はミリ秒じゃなくて秒数での指定になります。
//.toの引数は（セレクタ,秒数,プロパティいろいろ）となります。
TweenMax.to("#obj" , 3 , {left:"300px",delay:0.5,ease:Expo.easeInOut});
easingはGreenSock独自のものが用意されており、こちらのページで確認できます。
ページ上でオリジナルのイージングをカスタマイズ出来るのが地味に嬉しいです。
アニメーション後のコールバックも用意されていて、下記のように設定します。
TweenMax.to("#obj1,#obj2" , 1 , {
left : "300px" ,
backgroundColor:"#FF0000",
delay : 0.5 ,
ease : Expo.easeInOut ,
onComplete : function(){
console.log('comp');
} , // 処理完了後に呼ばれる関数を指定できます。
onStart : function() {
console.log('start');
} , // 処理開始前に呼ばれる関数を指定できます。
onUpdate : function() {
console.log('update');
} // 処理実行中に呼ばれる関数を指定できます。1フレームごとの処理です。
});
上記の.toは現在の状態から指定の状態へのアニメーションですが、.setを用いることでアニメーション前の初期状態を設定することも出来ます。
TweenMax.set("#obj" , {rotation:30, scale:1.2});
初期値を設定してアニメーションさせる.setと.toを合わせたfromToという関数もあります。
TweenMax.fromTo("#obj3", 0.5,
{rotation:0, scale:1.2},
{rotation:300, scale:0.6,delay:1}
);
また、jQueryなら.eachやforを使うような複数要素へのアニメーション適用も下記の.staggerToで簡潔に指定することも出来ます。
// 要素が入った配列を指定することで一括操作。
// 引数は.staggerTo(セレクタ,秒数,プロパティ,次の要素への適用delay)
TweenMax.staggerTo(".objs" , 0.5 , {
left:'300px',
rotation:360
} , 0.12);
他にも一時停止させる.pause()や再生させる.play()などいろいろな機能が用意されているのでこちらの公式ページで確認してみてください。
Timelineの使い方
次はTimeline系を見てみましょう。こちらは今までのアニメーションを個別のタイミングで動かしていくものとは違い、タイムラインを用意してその時間軸にアニメーションを追加していくイメージになります。
AEやPremiere、Flashなんかを使ったことがある人は直感的にわかるんじゃないでしょうか。
使い方はこれも下記のようにTweenMaxを読み込みます。
公式サイトからダウンロードしてくると、TimelineMax.min.jsなどが別にあるので紛らわしいんですが、TweenMax.min.jsに機能は内包されています。別ファイルとしてあるのはTweenLiteを使っているときにTimelineMaxを使用したいとき個別に読み込めるようにするためのようです。
<script src="TweenMax.min.js" type="text/javascript"></script>
タイムラインを定義したあとは、TweenMaxと同じように設定することができます。.setや.staggerToなんかも同様です。
//タイムラインを設定
var tl = new TimelineMax();
//引数は.to(セレクタ,アニメーション秒数,プロパティ,タイムラインの何秒で動かし始めるか)
tl.to("#obj1" , 0.5 , {left:"250px"}, 1);
第４引数で設定したアニメーションの開始時間を決めるので連続したアニメーションを設定する場合は下記のようになります。
ひとつのタイムライン上の設定をまとめることが出来るのでわかりやすく書くことが出来ます。ちなみに第４引数は省略することも出来て、その場合は設定した順番にひとつずつアニメーションが実行されていきます。
tl.to("#obj1" , 1 , {left:"250px"}, 0)
.to("#obj2" , 2 , {left:"250px"} , 0)
.to("#obj1" , 2 , {top:"250px"}, 1)
.to("#obj2" , 1 , {top:"150px"} , 1)
.to("#obj1" , 0.5 , {top:"0px",left:"0px"}, 3);
タイムラインの特定の秒数で、アニメーションじゃなく別の処理を呼び出すこともできます。
例えばタイムラインの1秒時点でアラートを出すには下記のように記述します。
var flg = 1;
tl.to("#obj1" , 1 , {left:"250px"}, 0)
//引数は.call(実行したい処理,処理に引き継ぐ値,スコープ,指定秒数)となります。
.call(function(elm){alert('引数は'+elm);},[flg],this,1)
.to("#obj1" , 2 , {top:"250px"}, 2);
TweenMaxの方でもありましたがこちらにもタイムラインの再生をコントロールできるpause()やplay()を使うことが出来ます。TweenMaxの動き単位より、タイムライン全体の再生コントロールの方が使い勝手良さそうです。
//定義したTimelineに対して一時停止、再生、逆再生をかける。 var tl = new TimelineMax(); tl.pause(); tl.play(); tl.reverse();
他にもメソッドはたくさんありますが紹介しきれないので詳しくは公式ドキュメントへどうぞ
自分もまだまだ使いこなせてはいませんが、TweenMaxを使えば高度なアニメーションが直感的に作れるようになりそうですね！あとはアイディア次第です（そこが一番難しいかもしれませんが）
