AS3S.ORG

シンプルなTweenクラスorg.as3s.Tweenをバージョンアップしました。
ソースコード及びダウンロードはこちらから。

シンプルさを損なわないように、機能を拡張しました。
主な新機能は以下の通り。
・複数のTweenを一括設定可能
・ディレイ（一定時間待機）のサポート
・単純なイージング（一定の割合で目標値に近づく、よく使われるタイプのイージング）のサポート
・等速イージング（速さを指定して等速運動するイージング）のサポート
・fl.motion.easing関数（Robert Pennerタイプ）以外のカスタムイージング関数のサポート
・イベントの追加（スタート、アップデート、ポーズ、完了）

Tweenクラスのソースコードは160行程度で非常に軽量で、また特殊なことはやっていないので
ソース全体の内容を把握することも比較的に容易ではないかと思います。

サンプルを見る
　
使い方は以下の通りです。

使い方

（※Ver.1.0から引数の仕様が若干変更されています。ご注意下さい。）

1. fl.motion.easing関数を使った基本的なTween

以下の例では、fl.motion.easing.Quadratic.easeInOut関数を使って、
24フレームで、現在の位置からx=300の位置まで移動します。

var tween:Tween = new Tween(mc, {x:300}, fl.motion.easing.Quadratic.easeInOut, 24);
tween.start();

コンストラクタでは対象オブジェクトだけを指定して、別にTweenの指定をすることもできます。

var tween:Tween = new Tween(mc);
tween.setTween({x:300}, fl.motion.easing.Quadratic.easeInOut, 24);

tween.start();

複数のパラメータを指定することもできます。

var tween:Tween = new Tween(mc, {x:300, y:200}, fl.motion.easing.Quadratic.easeInOut, 24);

tween.start();

fl.motion.easing.Elastic関数など、オプションの引数がある場合は配列で指定します。

var tween:Tween = new Tween(mc, {x:300}, fl.motion.easing.Elastic.easeOut, 24, [0.1, 0]);

tween.start();

引数useSecondsをtrueにすると、フレーム単位ではなく秒で指定することができます。

var tween:Tween = new Tween(mc, {x:300}, fl.motion.easing.Quadratic.easeInOut, 1, null, true);

tween.start();

2. 複数のTweenの一括設定

Tween指定の引数セットを配列にすることで、複数のTweenを一括設定して順番に再生させることができます。
以下の例では、x=300まで移動した後、y=200に移動します。

var tween:Tween = new Tween(mc,
                                            [{x:300}, fl.motion.easing.Quadratic.easeOut, 24],
                                            [{y:200}, fl.motion.easing.Quadratic.easeIn, 24]);

3. ディレイの設定

2.の方法を使い、パラメータとイージング関数をnullにして時間だけを指定するとそのままの状態で待機します。
以下の例では、48フレーム待機した後、y=200に移動します。

var tween:Tween = new Tween(mc,

                                            [null, null, 48],

                                            [{y:200}, fl.motion.easing.Quadratic.easeIn, 24]);

4. 単純なイージング

fl.motion.easing関数を使ったRobert Penner方式のイージングは便利ですが、必ずアニメーションの継続時間(duration)を指定する必要があります。そのため、よく使われる単純なイージング（x += dx*0.5 のような目標値と現在地の距離に比例した速度で近づく関数）を利用できませんでしたが、org.as3s.Tweenでは、関数指定にTween.easingを指定すると、このタイプのイージングも使用できます。

var tween:Tween = new Tween(mc, {x:100}, Tween.easing);

オプションの引数では比例定数（1以下、デフォルト0.5)、目標値に達したとする閾値(デフォルト0.1)を指定できます。
また、その場合、持続時間(duration)には0を設定します。

var tween:Tween = new Tween(mc, {x:100}, Tween.easing, 0, [0.2, 0.01]);

5. 等速イージング

速度を指定して、等速で移動させたい場合には、Tween.uniform関数を指定します。

var tween:Tween = new Tween(mc, {x:100}, Tween.uniform, 0, [5]);

5. イベントの取得

Tween動作中に取得できるイベントは以下の通りです。

TweenEvent.START　・・・Tween開始時（複数指定の場合は各Tween開始時に呼ばれます）
TweenEvent.UPDATE　・・・Tween中、毎フレーム呼ばれます。（pause中は呼ばれません）
TweenEvent.PAUSE　・・・pauseの設定が変更された時に呼ばれます。（pause解除時にも呼ばれます）
TweenEvent.COMPLETE ・・・すべてのTween完了時に呼ばれます。