TweenMaxでタイムリマップ

By | 2012年5月31日

アニメーションの一部がスローモーションになったり、早回しになったりするやつです。
timeScale、またはglobalTimeScaleというプロパティを変更することで簡単に実装する事ができます。
それぞれ見てみましょう。

●timeScale

TweenMaxインスタンスのプロパティで、Number型、初期値は1です。
この値を2にすると倍速でアニメーションし、0.5にすると1/2倍速になります。

//2秒かけてx=300まで移動する。
var tm:TweenMax = new TweenMax( "ムービークリップなど", 2, {x:300, ease:Sine.easeInOut} );

tm.timeScale=2; //2倍速(1秒)でx=300に移動する。
//tm.timeScale=0.25; // 1/4倍速(8秒)でx=300に移動する。

●globalTimeScale

timeScaleが個別のインスタンスに設定するものに対し、こちらは全てのトゥイーンに影響するstaticプロパティです。
Numbe型で初期値が1というのはtimeScaleと同じです。
この値を2にすると全てのトゥイーンが倍速でアニメーションし、0.5にすると1/2倍速になります。

TweenMax.globalTimeScale=2; //全てのトゥイーンが2倍速でアニメーションする。
//TweenMax.globalTimeScale=0.25; //全てのトゥイーンが1/4倍速でアニメーションする。

これらの値を変更すると、その時点からアニメーションのスピードが変化してしまうため、1からいきなり2や0.25に変わるといきなり感があるかと思います。徐々にスピードを変化させたい、○秒でスピードを2倍にしたい、というような場合には、timeScaleやglobalTimeScaleをトゥイーンさせることで実現できます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です