Tween クラスを利用した Starling のアニメーション

前回は、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 作者のサイトに掲載されている、各イージング関数の動作イメージです。ご参考まで。

http://www.sparrow-framework.org/wp-content/uploads/2010/06/transitions.png

細かな調整はできません。この点は、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 つということになりますが。。。

 

トラックバック(0)

トラックバックURL: http://cuaoar.jp/mt4/mt-tb.cgi/254

コメントする

2014年1月

Sun Mon Tue Wed Thu Fri Sat
      1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31  
レンタルサーバー

月別 アーカイブ

Powered by Movable Type 4.261