「Tweenクラス」の版間の差分

2013年10月21日 (月) 15:43時点における版

Tweenクラスとは?

LWFにはtween.jsが含まれておりMovieインスタンスやBitmapCLipインスタンスに簡単に動的なアニメーションを設定することができます。
タイムライン上に静的配置されているものにも反映することはできますが、反映後はタイムラインで設定したトゥイーンは適用されなくなってしまうので注意してください

※tween.js
https://github.com/sole/tween.js/

トゥイーンを設定する

Movieインスタンス、またはBitmapClipインスタンスにTweenを設定することが出来ます。 下記はサンプルになります。

//Movieのtweenを生成
var tween = <Movieインスタンス>.addTween()

//x:100の位置に30フレームかけて移動する
tween.to({x:100},30)

//トゥイーンを開始する
tween.start();

addTween()を使用するとtweenインスタンスが返ってきます。

また、メソッドチェーンが使えるので下記のように書いても問題ありません。

//tween メソッドチェーン指定
var tween = <Movieインスタンス>.addTween()
    .to({x:100},30)
    .start();

イージングを設定する

トゥイーンにはイージングをかけることが出来ます。 下記がサンプルになります。

//イージングを設定したtween
var tween = <Movieインスタンス>.addTween()
   .easing(Tween.Easing.Quadratic.Out) 
   .to({x:100},30)
   .start();

.easing()の引数に反映したいイージングを設定します。

※イージングの種類について
http://sole.github.io/tween.js/examples/03_graphs.html
LWFで使用する場合は Tween.Easing.(イージング名)　と書きます。

※イージングの挙動を見たい
http://www.robertpenner.com/easing/easing_demo.html

ディレイを設定する

ディレイをかけることで、少し間を置いてからトゥイーンをかけたりすることが出来ます。
下記はサンプルです。

//30フレーム待ってからトゥイーン
<Movieインスタンス>.addTween()
    .delay(30)
    .to({rotation:180},30)
    .start();

.delay()の引数に入れた値の分だけ待ってからトゥイーンを実行します。

トゥイーンを連結する

複数のトゥイーンを連結し、トゥイーン1が完了してからトゥイーン2を実行する。
と、いったことが出来ます。
下記はサンプルになります。

//x:100に移動してから、y:100に移動し、180度移転する
<Movieインスタンス>.addTween()
    .to({x:100},30)
    .start()
    //y:100に移動するtweenを生成し連結
    .chain()
    .to({y:100},30)
    //180度回転するtweenを生成し連結
    .chain()  
    .to({rotation:180},30);

.chain()で続けて新しいtweenを連結することが出来ます。
1回目の.chain()は.start()の後に設定してください。
.chain()で生成されたtweenは.start()を行う必要はありません。

トゥイーンが走っている間、関数を実行する

トゥイーン処理が走っている間に指定した関数を実行させることが出来ます。
下記はサンプルになります。

//トゥイーン中の座標を表示する
<Movieインスタンス>.addTween()
    .to({x:200},30)
    .onUpdate(function(){
        console.log(this.x);
    })
    .start();

トゥイーンが動いている間 .onUpdate()の引数に入れた関数が実行され続けます。
chain()などで連結したtweenには反映されません。
反映したい場合は別途指定してください。
onUpdate()で実行される関数の this はトゥイーンを設定したMovieインスタンスになります。

トゥイーンが完了したときに関数を実行する