こんにちは、CTOのづやです。
今日はアニメーションさせるときに便利なTweenMaxの使い方について書きたいと思います。
こちらのスピードテストのページを見るとわかるように、かなりハイパフォーマンスなアニメーションが可能です。
というわけで、基本的な使い方を書いていきたいと思います。
とりあえず要素を動かしてみよう
まずは公式ページからダウンロードしましょう。
慣れないうちはTweenMax.jsを、とりあえず以下のように読み込んでおきましょう。
<script src="js/TweenMax.min.js"></script>基本的によく使うクラスとして、以下の4つがあります。
- TweenLite
- TweenMax
- TimelineLite
- TimelineMax
Tween系とTImelite系の2種類がありまして、それぞれMaxが高機能版だと考えてよいかと思います。
単純に要素を動かすにはTween系を使用します。
idがblock1のTopを1秒かけて100pxまで動かしたい場合は、以下のように書きます。
// セレクタ、秒数(ミリ秒じゃないです、秒です)、プロパティです
// 戻り値でTweenMax オブジェクトがもらえます。のちにいろいろ使えます。
TweenMax.to("#block1" , 1 , {top:"100px"});
// jQueryだとこうですね
$("#block1").animate({top:"100px"} , 1000);これで動かすことができます。けっこう簡単です。
Tween系でよく使う関数
上記で紹介したようにtoで動かすだけなら可能ですが、他にもいろいろな機能がありますので、よく使うものを紹介していきます。
（公式のドキュメントには全部載っています。）
要素を動かすto
先ほども紹介しました、to()です。
引数は3つ渡せて、対象の要素（セレクタかオブジェクト。jQueryオブジェクトでもよい）、実行速度（秒）、プロパティや諸々です。
よく使う形で紹介します。
TweenMax.to("block1" , 1 , {
top : "100px" , // CSSのプロパティ(+=とかも使えます)
delay : 0.5 , // 実行までの待ち時間です
ease : "Linear" , // イージングです。後述しますがTweenMax独自のイージングもあります。
onComplete : function(){} , // 処理完了後に呼ばれる関数を指定できます。
onStart : function() {} , // 処理開始前に呼ばれる関数を指定できます。
onUpdate : function() {} // 処理実行中に呼ばれる関数を指定できます。動作しつつ
});ちなみにこの関数に限らず、対象要素は配列で複数指定できます。[obj1,obj2]みたいなのを渡すと2個に対して動作します。
独自のイージングはこちらで見ることが可能です。
他のプロパティ設定系でも同様ですが、CSS3にもけっこう対応しています。後はbackgroundColorなどのjQueryのデフォルトのanimateでは不可能な指定も可能だったりします。
こちらのほうにある程度まとまっています。
要素のstyleを設定するset
要素を指定し、styleを設定します。
jQueryでいうところのCSSになります。
引数は2つ渡せて、対象の要素、設定するプロパティです。
// 対象の要素、プロパティ
TweenMax.set("#block1" , {top:0 , scale:1});要素の初期状態を指定しつつ動かすfromTo
toとやることはほとんど一緒ですが、要素を動かす前の最初の状態を指定できます。
引数は、対象の要素、実行時間、初期状態のstyle、プロパティ諸々です。
TweenMax.fromTo("#block1" , 1 ,
{left:0 , opacity:0} , // left 0、opacity 0の状態を指定
{left:"100px" , opacity:1} // left 100px、opacity 1まで変化させる
);配列に対して時間差で動作させるstaggerTo（staggerFromTo）
配列を対象の要素として渡し、同じプロパティの指定を、指定した秒毎に動作させることができます。
引数は、対象の要素、1個の実行時間、プロパティ諸々、1個ずつの間、全部の完了イベントです。
<span class="move_string">A</span>
<span class="move_string">B</span>
<span class="move_string">C</span>
<span class="move_string">D</span>
<span class="move_string">E</span>こんなHTMLがあったとして、↓のように指定します。
// move_stringクラスの要素を0.5秒かけてopacityを1にする。0.2秒毎に実行される
TweenMax.staggerTo(".move_string" , 0.5 , {opacity:1} , 0.2)
// 初期状態も指定できるstaggerFromToの方だと↓のような感じですね
TweenMax.staggerFromTo(".move_string" , 0.5 , {opacity:0} , {opacity:1} , 0.2)
// 全部実行した後に特定の処理をしたい場合は↓のような感じで
TweenMax.staggerTo(".move_string" , 0.5 , {opacity:1} , 0.2 , function(){
// なんらかの処理
})※全部実行した後のイベントに渡せるパラメータなどがあったりしますが、今回は割愛します。
動作を途中で止めるpause
動作を途中で止めることができます。
jQueryで言うところのstop()になります。
引数は、止めた後の秒数、イベントを呼ぶかどうかのtrue/falseとなります。
// 動作させた後戻り値のオブジェクトを保持しておきます。
var tween = TweenMax.to("#move" , 5 , {top:"250px" , left:"250px"});
// 任意のタイミングで止めます
tween.pause(); // 引数を指定しないとその場で止めます。
// 動作をとめつつ、最後の動作まで行いたい場合は↓のようにします。
tween.pause(5); // 若しくはtween.pause(tween.totalDuration()); とか
// 動作をとめつつ最初に戻したい場合は↓のような感じ
tween.pause(0);まとめ
けっこうざっくりまとめましたが、基本的なところは紹介できたのではと思います。
まだまだ機能はいっぱいありますので、よければ公式ドキュメントを（英語ですが）読んでみてください。
次回はTimeLine系を紹介できればと思います。それでは。
※この記事を書いた時はver1.4.2です。
【づや（CTO）の話】
※ Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その1）
※ Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その2）
※ Pixi.jsを初めて触って簡単にアニメーションを作成してみた話（その3）
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
