サイトトップ
Director Flash 書籍 業務内容 プロフィール

Adobe Flash非公式テクニカルノート

starling.animation.Tweenクラスのインスタンス作成と再設定

ID: FN1301001 Platform: All Version: CS6/ActionScript 3.0 Runtime: Flash Player 11/AIR 3.0

Tweenクラス
パッケージ starling.animation
継承 Tween → EventDispatcher → Object
Tween()コンストラクタ
文法 public function Tween(target:Object, time:Number, transition:Object = "linear")
概要 トゥイーン設定のための新たなTweenオブジェクトをつくる。
引数

target:Object − トゥイーンさせるオブジェクト。

time:Number − トゥイーンにかける秒数。

transition:Object − トゥイーンの変化を定める文字列または関数(Functionデータ型)。文字列の場合には、Transitionsクラスの定数を用いる。デフォルト値はイージングのない等速を示すTransitions.LINEAR("linear")。
reset()メソッド
文法 public function reset(target:Object, time:Number, transition:Object = "linear"):Tween
概要 参照したTweenオブジェクトは初期化して、引数の設定を与える。
引数

target:Object − トゥイーンさせるオブジェクト。

time:Number − トゥイーンにかける秒数。

transition:Object − トゥイーンの変化を定める文字列または関数(Functionデータ型)。文字列の場合には、Transitionsクラスの定数を用いる。デフォルト値はイージングのない等速を示すTransitions.LINEAR("linear")。
戻り値 初期化されたTweenインスタンス自身。
targetプロパティ
文法 target:Object
プロパティ値 [読取り専用] トゥイーンさせるオブジェクト。
実装 public function get target():Object
totalTimeプロパティ
文法 totalTime:Number
プロパティ値 [読取り専用] トゥイーンにかける秒数。
実装 public function get totalTime():Number
transitionプロパティ
文法 transition:String
プロパティ値 [読取り専用] トゥイーンの変化を定める文字列。
実装 public function get transition():String

説明

Starlingフレームワークのstarling.animation.Tweenクラスを用いると、インスタンスのトゥイーンアニメーションがスクリプトで定められます。ActionScript 3.0に定義済みのfl.transitions.Tweenクラスとは、少し使い勝手が違うことにご注意ください。

Tweenインスタンスをつくるには、トゥイーンさせるオブジェクトとアニメーションにかける秒数をふたつの引数として、コンストラクタメソッドに渡します。また、第3引数にTransitionsクラスの定数で、トゥイーンに与えるイージングが定められます。第3引数を省くと、イージングのない等速の変化になります。

new Tween(対象オブジェクト, 秒数, イージング)

3つの引数で定められた値は、TweenインスタンスのプロパティTween.targetとTween.totalTimeおよびTween.transitionでそれぞれ調べられます。いずれも読取り専用のプロパティですので、設定は変えられません。

コンストラクタに渡した3つの引数の設定を変えたいときは、改めてTween()コンストラクタで新たなインスタンスをつくり直すか、Tween.reset()メソッドでインスタンスを初期化します。Tween.reset()メソッドに渡す3つの引数は、コンストラクタと同じです(後述「実装」参照)。

Tweenオブジェクト.reset(対象オブジェクト, 秒数, イージング)

Tweenオブジェクトを新たにつくるより、Tween.reset()メソッドで使い回す方が、メモリの消費は抑えられ、処理を速めることにもつながります。

両メソッドの第3引数として用いるTransitionsクラスの定数には、イージングのないデフォルトの等速(定数Transitions.LINEAR)以外に16のイージングが備わっています[*1]。下表001のように値の変わり方が標準・反動・バウンド・弾力の4種類あり、それぞれについてトゥイーンの始まりと終わりにどう変化を加えるか4つずつのバリエーションがあります。

表001■Transitionsクラスのイージングを定める定数
変化 定数
in out in-out out-in
標準 EASE_IN EASE_OUT EASE_IN_OUT EASE_OUT_IN
反動 EASE_IN_BACK EASE_OUT_BACK EASE_IN_OUT_BACK EASE_OUT_IN_BACK
バウンド EASE_IN_BOUNCE EASE_OUT_BOUNCE EASE_IN_OUT_BOUNCE EASE_OUT_IN_BOUNCE
弾力 EASE_IN_ELASTIC EASE_OUT_ELASTIC EASE_IN_OUT_ELASTIC EASE_OUT_IN_ELASTIC

Tween()コンストラクタとTween.reset()メソッドの第3引数には、トランジションの関数を定めることもできます。その場合、引数には時間に比例して0から1まで変わる値を受取り、引数に応じて変化する0から1が基本となる値を返します。

function トランジション関数(ratio:Number):Number

たとえば、イージングがなく、等速で変化させる関数(linear)はつぎのように定めることになります。

function linear(ratio:Number):Number {
  return ratio;
}


[*1]「Starling Framework Reference」の「Transitions」クラスのページ冒頭に、16のイージングがグラフで掲げられています。

例

「StarlingフレームワークのTweenクラスを使ったアニメーション」に、Tween()コンストラクタの使い方を始め、Tweenクラスによるトゥイーンアニメーションについての基本を解説しました。詳しくは、このノートをお読みください。

そのスクリプト002として、つぎのようなStarlingルートクラスをご紹介しました。3つのTweenインスタンスに異なるイージングを定め、順にトゥイーンアニメーションさせる例です。これはTween.reset()メソッドで、Tweenオブジェクトを使い回すように書替えることができます。

    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.core.Starling;
  3.   import starling.display.Sprite;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   import starling.animation.Tween;
  7.   import starling.animation.Transitions;
  8.   public class MySprite extends Sprite {
  9.     private var myQuad:Quad;
  10.     private var myTransitions:Vector.<String>;
  11.     private var positionsX:Vector.<Number>;
  12.     private var duration:Number = 4;
  13.     public function MySprite() {
  14.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  15.     }
  16.     private function initialize(eventObject:Event):void {
  17.       var nRight:Number = stage.stageWidth;
  18.       myTransitions = new <String>[
  19.         Transitions.EASE_IN_OUT_ELASTIC,
  20.         Transitions.EASE_IN_OUT_BOUNCE,
  21.         Transitions.EASE_OUT_IN_ELASTIC
  22.         ];
  23.       positionsX = new <Number>[nRight, 0, nRight];
  24.       myQuad = new Quad(50, 10, 0x0000FF);
  25.       myQuad.pivotX = myQuad.width / 2;
  26.       myQuad.pivotY = myQuad.height / 2;
  27.       myQuad.y = stage.stageHeight / 2;
  28.       addChild(myQuad);
  29.       nextTween();
  30.     }
  31.     private function nextTween():void {
  32.       var nLength:uint = myTransitions.length;
  33.       if (nLength > 0) {
  34.         var myTransition:String = myTransitions.shift();
  35.         var positionX:Number = positionsX.shift();
  36.         var myTween:Tween = new Tween(myQuad, duration, myTransition);
  37.         myTween.moveTo(positionX, myQuad.y);
  38.         Starling.juggler.add(myTween);
  39.         myTween.onComplete = nextTween;
  40.       }
  41.     }
  42.   }
  43. }

前掲Starlingルートクラス(MySprite)には、つぎのような手を加えます。書替えたクラス全体は、後にスクリプト001として掲げます(行番号はこのスクリプトにもとづきます)。まず、Tweenオブジェクトを使い回すため、インスタンスローカル変数でなくvar宣言したプロパティ(myTween)に納めます(第10行目)。

トゥイーンを定めるメソッド(nextTween())は、Tweenオブジェクト(myTween)がすでにつくられたかどうかを先に確かめます(第33行目)。まだオブジェクトがなければ、新たなTweenインスタンスをコンストラクタでつくります(第36行目)。そして、すでにTweenオブジェクトがあれば、Tween.reset()メソッドでそれを使い回します(第34行目)。

  1. private var myTween:Tween;
  1. private function nextTween():void {
  2.   var nLength:uint = myTransitions.length;
  3.   if (nLength > 0) {
  4.     var myTransition:String = myTransitions.shift();
  5.     var positionX:Number = positionsX.shift();
        // var myTween:Tween = new Tween(myQuad, duration, myTransition);
  6.     if (myTween) {
  7.       myTween.reset(myQuad, duration, myTransition);
  8.     } else {
  9.       myTween = new Tween(myQuad, duration, myTransition);
  10.     }
  11.     myTween.moveTo(positionX, myQuad.y);
  12.     Starling.juggler.add(myTween);
  13.     myTween.onComplete = nextTween;
  14.   } else {
  15.     trace(myTween.target, myTween.totalTime, myTween.transition);   // 確認用
  16.     myTween = null;
  17.   }
  18. }

なお、3つのトゥイーンアニメーションがすべて済んだら、Tweenオブジェクトのプロパティ(myTween)にはnullを与えて参照を消しています(第41〜44行目)。この処理が行われたことを確かめるため、trace()関数でTween.reset()メソッドが引数に定めた3つのプロパティ値を[出力]しました。[出力]パネルには、それぞれの値がつぎのように示されます。Starlingルートクラス(MySprite)全体は、以下のスクリプト001のとおりです。

[object Quad] 4 easeOutInElastic
スクリプト001■Tween.reset()メソッドでTweenオブジェクトを使い回して順にアニメーションさせる
    // ActionScript 3.0クラス定義ファイル: MySprite.as
  1. package {
  2.   import starling.core.Starling;
  3.   import starling.display.Sprite;
  4.   import starling.display.Quad;
  5.   import starling.events.Event;
  6.   import starling.animation.Tween;
  7.   import starling.animation.Transitions;
  8.   public class MySprite extends Sprite {
  9.     private var myQuad:Quad;
  10.     private var myTween:Tween;
  11.     private var myTransitions:Vector.<String>;
  12.     private var positionsX:Vector.<Number>;
  13.     private var duration:Number = 4;
  14.     public function MySprite() {
  15.       addEventListener(Event.ADDED_TO_STAGE, initialize);
  16.     }
  17.     private function initialize(eventObject:Event):void {
  18.       var nRight:Number = stage.stageWidth;
  19.       myTransitions = new <String>[
            Transitions.EASE_IN_OUT_ELASTIC,
            Transitions.EASE_IN_OUT_BOUNCE,
            Transitions.EASE_OUT_IN_ELASTIC
            ];
  20.       positionsX = new <Number>[nRight, 0, nRight];
  21.       myQuad = new Quad(50, 10, 0x0000FF);
  22.       myQuad.pivotX = myQuad.width / 2;
  23.       myQuad.pivotY = myQuad.height / 2;
  24.       myQuad.y = stage.stageHeight / 2;
  25.       addChild(myQuad);
  26.       nextTween();
  27.     }
  28.     private function nextTween():void {
  29.       var nLength:uint = myTransitions.length;
  30.       if (nLength > 0) {
  31.         var myTransition:String = myTransitions.shift();
  32.         var positionX:Number = positionsX.shift();
  33.         if (myTween) {
  34.           myTween.reset(myQuad, duration, myTransition);
  35.         } else {
  36.           myTween = new Tween(myQuad, duration, myTransition);
  37.         }
  38.         myTween.moveTo(positionX, myQuad.y);
  39.         Starling.juggler.add(myTween);
  40.         myTween.onComplete = nextTween;
  41.       } else {
  42.         trace(myTween.target, myTween.totalTime, myTween.transition);   // 確認用
  43.         myTween = null;
  44.       }
  45.     }
  46.   }
  47. }

実装

TweenクラスのコンストラクタTween()は、内部的にTween.reset()メソッドを直ちに呼出しています。したがって、インスタンスが使い回せるときは、Tween.reset()メソッドを用いる方が、コンストラクタで新たなインスタンスをつくるより速いでしょう。

public function Tween(target:Object, time:Number, transition:String = "linear") {
  reset(target, time, transition);
}


参考

[Starling Framework Reference] > [Tween]

作成者: 野中文雄
更新日: 2013年1月20日 Starling 1.3の更新にもとづき、Tween()コンストラクタとTween.reset()メソッドの第3引数に関数を定める場合について補足。
作成日: 2013年1月2日
Copyright © 2001-2013 Fumio Nonaka.  All rights reserved.