KTween

English 日本語

• ActionScript 3.0 専用のシンプル・軽量な国産 tween エンジンです。
• スマートフォンなどのモバイルデバイス向けコンテンツでの利用にも最適です。

SYNOPSIS

import net.kawa.tween.KTween;
import net.kawa.tween.KTJob;
import net.kawa.tween.easing.*;
public function run():void {
    KTween.to(mySprite, 2, {alpha: 0.0}, Linear.easeOut, callback);
    KTween.from(mySprite, 3, {x:320, y;480}, Quad.easeOut).round = true;
    var job:KTJob = KTween.fromTo(mySprite, 4, {x:0, y:0}, {x:320, y;480}, Elastic.easeOut);
    job.repeat = true;
}

主な特長

• ActionScript 3.0 専用。Flash 9/10 以降に対応。
• シンプルな構成です。ソースコードが短くて分かりやすく、ファイル容量も少ない。
• Quant.easeOut など、一般的な easing のトランジションを搭載しています。詳細はこちら
• Tweener より格段に速く、GTween よりも速い。BetweenAS3、TweenNano と同等〜少し速い。
• KTween の各オプションは AS3 の型チェックが効いて開発時に安心。（無名 Object でオプションを渡さない）

レポジトリ

• http://kawanet.googlecode.com/svn/lang/as3/KTween/trunk/
• http://kawanet.googlecode.com/svn/lang/as3/KTween/trunk/src/net/kawa/tween/

ドキュメント (ASDoc)

• http://kawanet.googlecode.com/svn/lang/as3/KTween/trunk/docs/index.html

ダウンロード

• SWC http://kawanet.googlecode.com/svn/lang/as3/KTween/trunk/swc/ktween.swc
• Tarball http://code.google.com/p/kawanet/downloads/list
• 最新版ソースコードは、Subversion で入手してください。

svn co http://kawanet.googlecode.com/svn/lang/as3/KTween/trunk/src/ KTween

KTween のカンタンな使い方

KTween を import する

 import net.kawa.tween.KTween;
 import net.kawa.tween.easing.*;

• もちろん、利用する easing が限定できる場合は .* でなくて、それだけ import しても OK です。

変更先を指定する

    KTween.to(mySprite, 2, {alpha: 0.0}, Linear.easeOut, callback);

• 2秒かけて、アルファを 0.0 にする tween。
• tween が完了したら、callback 関数が呼び出されます。

変更元を指定する

    KTween.from(mySprite, 3, {x:320, y;480}, Quad.easeOut).round = true;

• x座標を、いったん (320,480) に移動して、3秒かけて元の位置まで戻る tween。
• Quad.easeOut なので、最初は素早く移動して、終盤はゆっくり移動してピタリと止まります。
• round なので、x, y 座標を整数値に四捨五入します。（表示が速くなる）

変更元・変更先を指定する

    var job:KTJob = KTween.fromTo(mySprite, 4, {x:0, y:0}, {x:320, y;480}, Elastic.easeOut);
    job.repeat = true;

• 座標 (0,0) から (320,480) まで、4秒かけて移動するtween
• repeat なので、tween が終わったら、再び最初から同じ tween を繰り返します。

イージングを指定する

• 以下のイージングが利用可能です。
• Linear.easeOut - 直線
• Circ.easeOut - 平方根のカーブ
• Quad.easeOut - 2乗のカーブ
• Cubic.easeOut - 3乗のカーブ
• Quart.easeOut - 4乗のカーブ
• Quint.easeOut - 5乗のカーブ
• Expo.easeOut - 2の累乗のカーブ（v.1.0.2〜）
• Sine.easeOut - サインカーブ
• Back.easeOut - 行って少し戻る
• Bounce.easeOut - 行ってバウンドして収まる
• Elastic.easeOut - バネみたいにボヨンボヨンする
• easeOut 以外に、easeIn、easeInOut が利用可能です
• イージング定義関数の実体は、（4引数でなくて1引数の）静的関数です。

オプションを指定する

var job:KTJob = KTween.to(mySprite, 2, {x:320}, Quad.easeOut);

• to() from() fromTo() 各メソッドの戻り値から、tween ジョブが得られます

job.onClose = callback;

• tween 終了後のコールバック関数（クロージャ）を指定する。
• to() from() fromTo() メソッドへの最終引数と同じです。

job.onCloseParams = [1234];

• onClose 関数に渡す引数を指定します。指定しない場合は、引数は渡りません。

job.round = true;

• tween 中の各パラメタの値を Math.round() で整数に丸めます
• x, y 座標などがピクセルのグリッドに乗るので、描画が軽くなります。
• モバイルデバイスでオブジェクトを移動させる場合は、ぜひ指定してください。
• alpha と同時に指定することはできません。（alpha も四捨五入されてしまう）
• alpha と x, y などを同時に tween させる場合は、2つの tween を並列実行して下さい。

job.repeat = true;

• tween を無限に繰り返します。
• 終了状態まで到達すると、続けて初期状態からやり直します。
• rotation を 0〜360°回転させ続ける場合などに利用できます。

job.repeat = true;
job.yoyo = true;

• tween をヨーヨーで無限に繰り返します。
• 終了状態まで到達すると、初期状態に向かって逆向きに tween します。
• 初期状態まで戻ったら、再び終了状態に向かって tween を再開します。
• easeInOut を使うと、自然な見た目で無限ループが可能です。

tween を終了させる

• repeat が false なら、指定した時間が終わると tween は自動的に終了します。
• 指定した時間を待たずに、以下のメソッドにより各 tween 単位で終了させることができます。

job.cancel();

• 即座に初期状態（from）の値に戻して、tween ジョブをキャンセルする

job.complete();

• 即座に最終状態（to）の値を設定して、tween ジョブを完了させる

job.abort();

• 即座に tween ジョブを強制終了する。（値は現在の値のまま変えない）

処理中の全ての tween を終了する

• ジョブ単位でなく、処理中の全ての tween を一括して終了する場合はこちら：

 KTween.cancel();
 KTween.complete();
 KTween.abort();

イベント

コールバック関数呼び出し

• 以下のプロパティで、コールバック関数（クロージャ）を指定できます。
• onInit - tween が開始した時に呼び出されます
• onChange- 各フレームごとに値の設定後に呼び出されます。（描画直前）
• onComplete - tween の最後の移動時に呼び出されます（最終状態の設定後、描画直前）
• onClose - tween が完全に終了した時に呼び出されます（最終状態の描画後）
• onCancel - tween がキャンセルされた場合に呼び出されます

コールバック関数への引数

• 各コールバック関数は、デフォルトでは引数なしで呼び出されます。
• コールバック関数に引数を渡したい場合は、on___Params プロパティに配列を入れて下さい。
• onInitParams
• onChangeParams
• onCompleteParams
• onCloseParams
• onCancelParams

• 循環参照によるメモリリークを防止するため、tween 終了時に各コールバック関数およびパラメタはクリアされます。(null)

addEventListener によるイベント処理

• コールバック関数を呼び出さずに、AS3 らしく addEventListener によるイベント処理も可能です。
• event インスタンスの target は KTJob になります。event.target.target で tween 対象のオブジェクトが取り出せます。
• なお、イベント処理はオーバーヘッドがあります。コールバック関数のみを使った方が高速です。
• Event.INIT
• Event.CHANGE
• Event.COMPLETE
• Event.CLOSE
• Event.CANCEL

FAQ

• KTweenFAQJ に移動しました。