org.as3s.Tween Ver2.0の使い方(1) 基本的な使い方
基本的な使い方
tween = new Tween(対象オブジェクト, {パラメータ:目標値}, イージング関数, 持続時間, [イージング関数への追加引数], 秒単位の指定);
tween.start();
対象オブジェクト:トゥイーンしたい対象オブジェクト
{パラメータ:目標値}:トゥイーンで変更したいパラメータをオブジェクト形式で指定。（複数指定可）
イージング関数:fl.motion.easingパッケージの各イージング関数の他、カスタムイージング関数も指定可。
持続時間:トゥイーンの持続時間（デフォルトはフレーム単位）
[イージング関数への追加引数](オプション):fl.motion.easing.Elasticクラスなど追加引数を指定できるイージング関数に対しては、配列形式で引数を渡すことができます。
秒単位の指定(オプション):持続時間はデフォルトではフレーム単位になっていますが、trueに指定すると秒単位の指定になります。
例）
tween = new Tween(sp, {x:100, y:200}, Quadratic.easeOut, 30);
tween.start();
以下、様々な使い方の例を簡単にご紹介します。
イベントを受け取る
AS3標準のイベントモデルと同じようにイベントを受け取ることができます。
取得できるイベントは以下の通りです。
Tween.START: トゥイーンが開始された時に呼ばれる
Tween.UPDATE: トゥイーン中毎フレーム呼ばれる
Tween.PAUSE: トゥイーンが一時中断された時と再開された時に呼ばれる（中断・再開はtween.pauseのtrue/falseで設定）
Tween.COMPLETE: トゥイーンが完了した時に呼ばれる
例）
tween.addEventListener(Tween.START, onTweenStart);
tween.addEventListener(Tween.UPDATE, onTweenUpdate);
tween.addEventListener(Tween.PAUSE, onTweenPause);
tween.addEventListener(Tween.COMPLETE, onTweenComplete);
tween.start();
連続した複数のトゥイーンを一括指定する
対象オブジェクト以外の引数を配列形式でつなげることで、複数のトゥイーンを連続して実行することができます。
例）
tween = new Tween(sp,
[{x:100, y:200}, Quadratic.easeOut, 30],
[{alpha:0}, Quadratic.easeInOut, 2, null, true]
);
tween.start();
ディレイ（待ち時間）を設定する
上記の一括指定を応用することで、動かない待ち時間をつくることができます。
例）
tween = new Tween(sp,
[{x:100, y:200}, Quadratic.easeOut, 30],
[null, null, 30],
[{alpha:0}, Quadratic.easeInOut, 2, null, true]
);
tween.start();
繰り返しトゥイーンを行う
tween.start()の代わりに、tween.repeat()を使うことで指定したトゥイーンを繰り返すことができます。
例）
//同じトゥイーンを５回繰り返す
tween.repeat(5);
//無限に繰り返す場合
//tween.repeat();
後からトゥイーンの設定を行う
コンストラクタでは対象オブジェクトのみを指定して、setTween()メソッドを使ってトゥイーンの設定を行うことができます。
例）
tween.setTween({x:100, y:200}, Quadratic.easeOut, 30);
//複数一括指定の場合
//tween.setTween(
// [{x:100, y:200}, Quadratic.easeOut, 30],
// [{alpha:0}, Quadratic.easeInOut, 2, null, true]
//);
tween.start();
ワンライナーを使う
トゥイーンの設定、イベントリスナーの登録、トゥイーンの開始までを１行で記述することができます。
例）
//tweenオブジェクトが必要ない場合
//Tween.start(sp, {START:onTweenStart, COMPLETE:onTweenComplete}, {x:100}, Quadratic.easeOut, 30);
//イベントリスナーも登録しない場合
//Tween.start(sp, {}, {x:100}, Quadratic.easeOut, 30);
動作サンプル（画面クリックでスタートします）
import fl.motion.easing.*;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample1 extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample1() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(0,0,100,100);
sp.graphics.endFill();
addChild(sp);
//Multi-step Tween with delay
tween = new Tween(sp,
[{x:300, y:200}, Quadratic.easeOut, 15],
[null, null, 30],
[{x:0}, Linear.easeNone, 60],
[{y:0}, Quadratic.easeInOut, 2, null, true]
);
//Event
tween.addEventListener(Tween.COMPLETE, onTweenComplete);
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
sp.x = sp.y = 0;
tween.reset();
tween.start();
}
private function onTweenComplete(event:Event):void {
trace("complete!")
}
}
}