前回は、EnterFrame イベントを使って、アニメーションを実現する方法をご紹介しました。今回は、Tween クラスを使った方法です。
Tween を使った場合の特徴の 1 つは、アニメーションの期間を秒数で指定することです。Tween は指定された時間をかけて、表示オブジェクトの属性値、例えば x 座標を最終的な値へと、だんだんと変化させます。
コードで書くと以下のような感じです。まず Tween のコンストラクタで、対象となるオブジェクトと時間を指定して、次に、animate() メソッドを使って、変化させる属性の名前と最終値を設定します。複数の属性を変化させる場合は animate() を何回も呼ぶことになります。
// myObjectを2秒かけて、横に50px、縦に80px移動させるアニメーションの指定 var myTween:Tween = new Tween(myObject, 2.0); myTween.animate("x", myObject.x + 50); myTween.animate("y", myObject.y + 80);
前回のサンプルから、Tween を使って onAddedToStage() を書き直したのが以下のコードです。矩形を 4 秒かけて (0, 0) から (220, 380) の座標に移動させる、というものです。
import starling.animation.Tween; import starling.core.Starling; import starling.display.Quad; import starling.events.Event; private function onAddedToStage(e:Event):void { myQuad = new Quad(100, 100); myQuad.color = 0x00FF00; // Tweenオブジェクトの生成 var myTween:Tween = new Tween(myQuad, 4.0); // 変化させる属性の指定 myTween.moveTo(220, 380); // JugglerにTweenオブジェクトを追加する Starling.juggler.add(myTween); }
このサンプルでは、animate() の代わりに moveTo() メソッドが使われています。moveTo() は x 座標と y 座標の両方の移動を指定したい時に便利なメソッドです。
その他にも、似たような便利メソッドとして、比率を変える scaleTo() や アルファを変える fadeTo() が提供されています。なぜか角度を変えるメソッドは無いので、回転させるときは animate() 一択になります。
import starling.utils.deg2rad; var myTween:Tween = new Tween(object, 2.0); myTween。scaleTo(2); myTween.fadeTo(0); myTween.animate("rotation", deg2rad(45)); Starling.juggler.add(myTween);
上のサンプルで使用している deg2rad() は、角度をラジアンに変換する関数です。Starling のフレームワークに付いてきます。
Juggler クラス
さて、上のサンプルを良く見ると、Tween のインスタンスに必要な設定を行ったら、それを Starling の juggler という属性に追加しています。これが、アニメーション開始の合図になります。
Juggler はオブジェクトの "時間を進める" クラスです。ただし、IAnimatable というインターフェースを継承したオブジェクトだけが対象です。Tween は IAnimatable を継承しています。
Juggler はオブジェクトを渡されると、そのオブジェクトの時間を進め続けます。そして、オブジェクトに対して指定された期間が過ぎると、オブジェクトへの参照を自動的に開放します。
ところで、Juggler には delayCall() というメソッドがあります。これは、任意の関数を、指定した時間が経過したら呼び出すように Jaggler に指示するためのものです。呼び出す関数に引数を渡すこともできます。
下は、1 秒後に myFunc() という関数を呼び出して、引数に "Hello" を渡す例です。
Starling.juggler.delayCall(myFunc, 1.0, "Hello"); private function myFunc(message:String):void { trace(message); }
アニメーションの期間と、関数実行のタイミングを、同じ Juggler に管理させることで、両者を完全に同期させることが簡単にできます。便利です。
Juggler のオブジェクトは Starling クラスが提供するため、通常はこれを使ってアニメーションを開始すれば事足ります。ただ、アニメーションを個別に制御したい場合などは、自分で Juggler オブジェクトを生成したほうが便利なこともあるでしょう。
Juggler オブジェクトを自分で管理する場合は、EnterFrame イベントごとに、advanceTime() メソッドを呼ぶようにします。また、dispose() でのリソース開放処理も必要になるかもしれません。
イージングの種類の指定
Tween には、イージング関数を指定できます。イージング関数の種類は、コンストラクタの 3 つ目の引数として指定します。デフォルト値は linear、すなわちイージング無し、です。
コンストラクタで設定したイージング関数を後から変えることはできません。Tween オブジェクトの transition 属性から、値の参照だけは可能です。
import starling.animation.Transitions; var myTween:Tween = new Tween(myQuad, 4, Transitions.EASE_OUT_BOUNCE);
上の例では、イージング関数に easeOutBounce を指定しています。ここに指定可能な値は Transitions クラスに定義されています。
下は、Starling 作者のサイトに掲載されている、各イージング関数の動作イメージです。ご参考まで。
細かな調整はできません。この点は、Edge や Flex と同じです。
Tween 進行状態の通知
Tween には、アニメーションの開始、進行中、終了を知らせる関数を設定できます。AS2 のイベントハンドラっぽい感じの使い方です。
具体的な関数名は、それぞれ onStart(), onUpdate(), onComplete() です。onStart() と onComplete() は 1 回ずつ、onUpdate() は更新の行われたフレームの数だけ呼ばれます。
下は、3 つの関数を設定した例です。
private function onAddedToStage(e:Event):void { myQuad = new Quad(100, 100); myQuad.color = 0x00FF00; var myTween:Tween = new Tween(myQuad, 4, Transitions.EASE_OUT_BOUNCE); myTween.moveTo(220, 380); Starling.juggler.add(myTween); myTween.onStart = onStart; myTween.onUpdate = onProgress; myTween.onComplete = onComplete; addChild(myQuad); } private function onStart():void { trace ("トゥイーンが開始されました"); } private function onProgress():void { trace ("トゥイーンが実行中です"); } private function onComplete():void { trace ("トゥイーンが終了しました") }
アニメーションの前処理や後処理を行いたいときには役立ちそうです。
次回は、Starling でのテクスチャの使い方をご紹介する予定です。いちおう、アニメーションの実現に使えなくもないかも?しれません。だとすると、今回紹介する Starling のアニメーションの実現方法は全部で 4 つということになりますが。。。
コメントする