ja.TweenClass | jAction

ja.TweenClass



TweenClassは、2012年5月6日リリースのjAction ver1.01で、ja.TweenClassとして統合いたしました。

jActionプロジェクトの大渕脇です。

拡張機能としてja.TweenClassを作ったのでアップします。

なにをする為のクラスかというと、プロパティ値を指定したフレーム間をイージング処理して値を変える為のものです。
というと難しそうに思えますが、例えば30フレームでX座標をA点からB点に移動するときに、最初は速く、停止前はブレーキをかけて遅くみたいな処理に良く使います。
座標だけじゃなく、透明度も最初ゆっくり薄くなっていき、最後のほうで加速度的に速く薄くなっていくとか。

FalshのTweenクラスなどと、同じような役割をします。

サンプルページは、こちら
Tweenサンプル確認サイト

 

 

 

 

 

左上のキャラクターが止まってますが、ボタンを押すと最初は速く、最後の方でゆっくり止まります。
ソースはこちらです。
Tween

 

new  ja.TweenClass(変化させたいプロパティをもっているオブジェクト, プロパティ , イージングの値 , 最初のプロパティ値 , 最後のプロパティ値 , 何フレームかけてTweenするか);

の6つの引数を指定します。

サンプルでは、キャラクターのアニメーションオブジェクト「animeObj」を使って

var tweenObj = new ja.TweenClass(animeObj, "x" , 70 , 0 , 270 , 30);

と指定しています。

animeObjのX座標を、0から270に30フレームかけて、イージング値70の設定で変化させるという意味になります。

イージング値は -100 ~100で数字が大きい程、最初が速く、最後が急ブレーキになっていきます。 数字が小さい程、最初がゆっくり、最後が速くなります。 0を指定すると等速です。

tweenオブジェクト.addEventListener("tweenEnd",リスナーオブジェクト);

のリスナーを登録すると、Tween終了時にリスナーオブジェクトのtweenEndメソッドが実行されることになります。

 

Tweenオブジェクトを破棄する場合は

tweenオブジェクト.destroy();
tweenオブジェクト = null;

のようにします。

 

tweenオブジェクト.stop();

でTweenを途中でも停止させられます。

停止させた上でtweenオブジェクトは、以下のプロパティ値をもってますので

obj = 変化させたいプロパティをもっているオブジェクト

prop = プロパティ

easing = イージング値

begin = 最初のプロパティ値

finish = 最後のプロパティ値

duration = 何フレームかけてTeenするかのフレーム値

の値を設定して

tweenオブジェクト.play();

で再スタートさせられます。

同時のタイミングで動かす必要がなければ一つのTweenオブジェクトで、複数のオブジェクトを動かせるのでメモリ節約になって便利です。