[ Starling Framework ] アニメーション – Tween –

前回の記事で、MovieClipクラスを使用してコマアニメーションを実現することが出来ました。
今回は、オブジェクトの拡大・縮小、フェード、移動を行ってみたいと思います。

使用するクラスはTweenで、MovieClipと同じIAnimatableインターフェースを実装しています。
さっそく作り方を見ていきましょう。

まずは、Tweenインスタンスを生成します。

    var tween:Tween = new Tween( target, number );
　　　　　

第１引数にはアニメーション対象となるオブジェクト、第２引数にはアニメーションの時間を指定します。

imageというImageクラスのインスタンスがあった場合は、下記のようになります。

    //imageを対象にしたアニメーション時間が1秒のTweenインスタンスを生成
    var tween:Tween = new Tween( image, 1.0 );
　　　　　

アニメーションの再生はMovieClipと同じように jugglerに追加します。

    Starling.juggler.add( tween );
　　　　

拡大・縮小、フェード、移動を行うには、Tweenクラスが持っている関数で設定します。

それぞれ使用する関数を見ていきましょう。

    //拡大・縮小
    tween.scaleTo( 2.0 );
    
    //フェード
    tween.fadeTo( 0.5 );
    
    //第１引数にx座標、第２引数にy座標を指定
    tween.moveTo( 400, 300 );
　　　　

拡大・縮小には scaleTo関数を使用し、引数で指定した値がそのまま倍率となります。

フェードには fadeTo関数を使用します。
引数には0～1.0を指定し、0に近いほど透明になるので、上記の例では0.5を指定しているので半透明状態までフェードする設定をしています。

移動はmoveTo関数を使用し、引数にはx座標,y座標を絶対座標で指定します。
絶対座標指定のため、対象のオブジェクトが仮に x:100, y:200にあった場合に moveTo( 100, 200 ) と指定しても全く変化はないのでご注意下さい。

拡大・縮小、フェード、移動は上記までの実装で行うことが可能です。

ここからは、Tweenを使用する際に設定できるプロパティについてご紹介します。

各種アニメーションには、イージング処理(※1)をつけることが出来ます。
イージングの設定方法は下記の２種類です。

• Tweenのコンストラクタの引数で指定
• 「transition」プロパティで設定

※1.アニメーションに「減速」や「加速」といった補助効果をつけること

指定する値は、Transitionクラスのスタティック定数を使用します。

    //コンストラクタで指定
    var tween:Tween = new Tween( target, 2.0, Transitions.EASE_IN );
    
    //transitionプロパティで設定
    tween.transition = Transitions.EASE_OUT;
　　　　

設定できる種類が多いため、ここでは2つだけご紹介しましたが、もっと詳しく知りたい方はコチラをご覧下さい。

Tweenクラスは「onStart」「onUpdate」「onComplete」というプロパティを持っていて、コールバック関数を設定することができ、それぞれ下記のタイミングで実行されます。
・onStartに設定した関数は、アニメーション開始時
・onUpdateに設定した関数は、アニメーション中
・onCompleteに設定した関数は、アニメーション終了時

    tween.onStart     = tweenStart;
    tween.onUpdate    = tweenUpdate;
    tween.onComplete  = tweenComplete;

    
    private function tweenStart():void
    {
        //処理を記載
    }
    
    private function tweenUpdate():void
    {
        //処理を記載
    }
    
    private function tweenComplete():void
    {
        //処理を記載
    }
    

また、上記プロパティに付随して「onStartArgs」「onUpdateArgs」「onCompleteArgs」というプロパティも持っています。
これらのプロパティはArray型の配列を設定し、設定した配列に格納されている値をそれぞれの対応したコールバック関数に引数として渡すことが出来ます。

    tween.onStart        = tweenStart;
    
    //onStartのコールバック関数に渡す引数を配列で指定
    tween.onStartArgs = [ "tweenStart Method!! :: ", 777 ];
    
    private function tweenStart( str:String, value:Number ):void
    {
        trace( str + value );       //tweenStart Method!! :: 777
    }

アニメーションの繰り返し回数の設定は「repeatCount」プロパティで行います。
0以上を設定することができ、0を指定すると無限ループ、その他は指定した数値分アニメーションを繰り返します。
デフォルトでは1が設定されているので、自らこのプロパティを設定しない限り、基本的にはアニメーションは１回で終了することになります

        //無限ループ設定
        tween.repeatCount = 0;
　　　　

「reverse」プロパティを true に設定すると、アニメーション終了時に直前に再生したアニメーションを逆再生します。
逆再生のアニメーションは元となるアニメーションとは別カウントとなります。
「reverse」プロパティをtrueに設定しても「repeatCount」プロパティが1の場合は、元となるアニメーションが終了した時点でカウントが加算され「repeatCount」で設定した1に到達してしまうため、逆再生は行われません。
そのため、「reverse」プロパティを使用するときは、必ず「repeatCount」を2以上に設定するようにしましょう。

    //逆再生設定
	tween.reverse = true;
　　　　

以上で、Tweenクラスのご紹介は終了となります。

最後まで御覧いただきありがとうございました。

Tween使用例

import starling.animation.Tween;
import starling.core.Starling;
import starling.display.Image;
import starling.display.Sprite;
import starling.textures.Texture;
import starling.events.Event;
import starling.animation.Transitions;

internal class StarlinTestMain extends Sprite
{
    [Embed(source = "img.png")]
    private static const Img:Class;     
    
	private var image01:Image;
	private var image02:Image;
	private var image03:Image;
	private var image04:Image;
	
	private var tween01:Tween;
	private var tween02:Tween;
	private var tween03:Tween;
	private var tween04:Tween;
	
	public function StarlinTestMain()
    {
        addEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
    }
 
    private function addStage(e:starling.events.Event):void
    {
        removeEventListener(starling.events.Event.ADDED_TO_STAGE, addStage);
         
		var texture:Texture = Texture.fromBitmap( new Img() );
		
		image01 = new Image( texture );
		image01.x = 100;
		image01.y = 100;
		addChild( image01 );

		image02 = new Image( texture );
		image02.x = 100;
		image02.y = 200;
		addChild( image02 );

		image03 = new Image( texture );
		image03.x = 100;
		image03.y = 300;
		addChild( image03 );

		image04 = new Image( texture );
		image04.x = 100;
		image04.y = 400;
		addChild( image04 );

		//拡大縮小のアニメーション
		tween01 = new Tween( image01, 1.0);
		tween01.scaleTo( 3.0 );		
		tween01.reverse = true;
		tween01.repeatCount = 0;
		Starling.juggler.add( tween01 );

		//イージング処理をつけた移動アニメーション
		tween02 = new Tween( image02, 2.0, Transitions.EASE_OUT );		
		tween02.moveTo( 600, 200 );
		tween02.repeatCount = 0;
		tween02.onStart = tweenStart;
		tween02.onComplete = tweenComplete;
		Starling.juggler.add( tween02 );
		
		//フェードアニメーション
		tween03 = new Tween( image03, 3.0 );		
		tween03.fadeTo( 0 );
		tween03.reverse = true;
		tween03.repeatCount = 0;
		tween03.onUpdate = tweenUpdate;
		tween03.onUpdateArgs = [ "image03's Tween " ];
		Starling.juggler.add( tween03 );
		
		//いろいろ組み合わせたアニメーション
		tween04 = new Tween( image04, 1.0, Transitions.EASE_IN_OUT_BACK );
		tween04.fadeTo( 0 );
		tween04.moveTo( 600, 400 );
		tween04.scaleTo( 2.0 );		
		tween04.reverse = true;
		tween04.repeatCount = 0;
		Starling.juggler.add( tween04 );
	}
	
	private function tweenStart():void
	{
		trace( " tween Start! " );
	}
	
	private function tweenUpdate( str:String ):void
	{
		trace( str );		
	}
	
	private function tweenComplete():void
	{
		trace( " tween Complete! " );
	}
}
　　　　

＜次回の更新について＞
次回は、タッチイベントについてご紹介します。

---

弊社では全国各地の請負い（ご自宅）で作業協力頂ける、フリーランスエンジニアの方を常時探しております。
ご興味ある方は、お気軽にお問い合わせ下さい。

---