KTweenを使ってみる

フラッシュをやる上で現状必須と言えるTweenライブラリ。
既に開発・サポートが終了したTweenerをいつまでも使っているはどうなのよと、
乗り換え先を探していたところKawa.netさんが軽量・高速に特化したTweenライブラリ、
KTweenを開発したということで飛びついてみた。
いくら最近のPCのスペックが良いとはいえ、軽いに越したことはなし。
仕事ではもっとサクサク動くようにならないのかと戻されることもままあり、
チューニングに四苦八苦するのですが、ライブラリの中味まで手が届かず
もどかしい思いをすることも。
最初から最速、すばらしい。

以下感想、使い方等ですが、これまでTweener一本に操を立ててきた身なので、
他のライブラリBetweenやtweensyなどとは比較できません。あしからず。

基本丁寧にblogドキュメントにまとめられています。
とりあえずtest_mcをx=500に3秒かけて”easeOutElastic”の動きで。

■ Tweener
Tweener.addTween( test_mc, { x:500, time:3,  transition:"easeOutElastic"} );
■ KTween
KTween.to( test_mc, 3, { x:500 }, Elastic.easeOut) ;

書き方は異なりますが、Tweenerを使っていれば対応関係は分かる。
ターゲット、時間、プロパティ、トランジションがそれぞれ引数に分かれています。
型指定を厳密にすることで高速化に成功しているとのこと。
トランジションの指定がストリングではなく静的関数なのは高速化以外にも、
エラーチェックとコード補完が効く点で良いですね。
スペルミスとか結構あったので。
下が実際に動かしたところ。
ShadowboxJSとblogテーマの相性が悪いらしく中央に表示されません、そのうち直します → ShadowboxJSアップデートしたら直った! )

【SWF】KTweenとTweenerの動き比較

Elasticな動きの感じがだいぶ違いますね。
Quad(2乗のカーブ)、Cubic(3乗のカーブ)と違い、ElasticやBounceは
これといった定義がないようなのでこれは好みでしょうか。
オプション指定もいろいろできて、

var ktJob:KTJob = KTween.to( test_mc, 3, { x:500 }, Elastic.easeOut) ;

ktJob.round = true;//x,y座標を整数値に四捨五入することで表示を高速に
ktJob.repeat = true;//tweenを繰り返し
ktJob.yoyo = true;//repeat = trueとセットにして往復ループの動き
ktJob.onInit = hoge;//開始時実行する関数指定
ktJob.onCancel = hoge;//キャンセル時実行する関数指定
ktJob.onChange = hoge;//tween毎にフレーム実行する関数指定
ktJob.onComplete = hoge;//tween最後の移動時実行する関数指定
ktJob.onClose = hoge;//完全終了時実行する関数指定
ktJob.onCloseParams = [value1,value2];//終了時実行する関数への引数指定

ktJob.cancel();//最初の状態(from)に戻す
ktJob.complete();//完了の状態(to)に移行
ktJob.abort();//そのまま停止

ktJob.target//対象のオブジェクト
ktJob.target.name//test_mc

Tweenerで面倒だった繰り返しの動きが簡単。
roundは値を整数値にしてくれるので自作でフレームトィーンを追加するときにも?
コールバックも各種取り揃えてます。
repeat = true;にしていてもonCompleteは何度も叩かれるわけではない模様。
complete();をしたタイミングではじめて発動します。

色のtweenについて。
それっぽいクラスがあったので明度・彩度などのtweenも出来るかと思ったが、
FAQにも書いてあるとおり、これは色指定の便利関数なので、
これを使って自分で実装してねというスタンス。
onChangeのコールバック関数を利用して以下のように。

var ct:ColorTransform;

private function hoge():void {

	//#1C98DBへ色変更(ヨーヨー繰り返し)
	var cObj = KTColorTransformUtil.color(0x1C98DB, 1);
	ct = new ColorTransform();
	var ktJob:KTJob = KTween.to(ct, 3, cObj, Linear.easeIn);
	ktJob.repeat = true;
	ktJob.yoyo = true;
	ktJob.onChange = colorChange;
}

private function colorChange():void {
	test_mc.transform.colorTransform = ct;
}

【SWF】KTweenでのカラーtween

注意点としては今のところdelayはない模様。
KTween.to() 等は、即座に tween を開始します。以下のようにウェイトを入れて下さい。
A案)自前で setTimeout で自前で待ってから、KTween.to() する。
B案)自前で KTJob をオブジェクトを作って、queue() の第2引数に秒数を指定する。

delayはよく使うのでここは少し面倒かも。
しかしながら現状やっているTweenerの使い方であれば置き換えはすぐ可能そう、
そして軽い、速いは正義ということで今後の案件では導入してみようかなと。
また先発の国産tweenクラスBetweenAS3も速い+機能豊富と聞いているので、
機会をみてこれも触ってみたいと思うております。

【2010/02/18追記】
中断、再開のpause,resumeメソッドが追加されたみたいです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です