Unknown Quality

jQueryっぽいシンタックスで書けるトゥイーンライブラリで、容量軽くて結構処理も早いみたいなのでちょっと試してみました。

eaze-tween - Project Hosting on Google Code
http://code.google.com/p/eaze-tween/

試したバージョンは「eaze-tween-beta7b-rev71.zip」というやつです。
http://code.google.com/p/eaze-tween/downloads/list

eaze-tweenでは、クラスを使って操作するのではなく、関数が定義されていて、その関数を呼び出して、トゥイーンを設定していきます。eazeという関数が、aze.motionってパッケージにあるので、

import aze.motion.eaze; 

としてやると使えるようになります。

使い方は、eaze関数の引数に対象のオブジェクトを渡して、そのあと、ドットでつないでメソッドを呼び出していきます。eaze関数の戻り値がEazeTweenクラスのインスタンスになっていて、そのインスタンスのメソッドを直接ドットでつないで呼び出します。さらにEazeTweenクラスの各メソッドは戻り値がEazeTweenクラスのインスタンスになってるので、さらにドットでつないで次のメソッドを呼び出すことができます。

では簡単な使い方を紹介してみます。


現在位置から1秒かけて、xを200に移動。

eaze(target).to(1, {x:200});

２秒かけて、y:200から現在位置へ。

eaze(target).from(2, {y:200});

今すぐ、xを300にする。

eaze(target).apply({x:300});

タイムラインのラベルへに向けてトゥイーン

eaze(target).play("label"); 

トゥイーン中のイベント
実行中に_onUpdate関数が呼び出され、完了すると_onComplete関数が呼び出される

eaze(target).to(3, {x:300}).onUpdate(_onUpdate1).onComplete(_onComplete);

イベントに引数を渡す
onUpdateイベントにtargetを渡す、複数も可。

eaze(target).to(3, {y:300}).onUpdate(_onUpdate2, target).onComplete(_onComplete);

イージングの指定。Quadratic.easeOutがデフォルト。

eaze(target).to(3, {x:300}).easing(Cubic.easeInOut);

連続してトゥイーン
1秒かけてxを300にしたあと、yを1秒かけて300に。

eaze(target).to(1, {x:300}).chain(ball).to(1, {y:300});

ディレイ
１秒待ってから、xを300へ1秒かけて。

eaze(target).delay(1).to(1, {x:300});

updateNowメソッドで現在のプロパティをすぐに適用。
fromを使うとき、delayしてるとトゥイーン開始時に、はじめてプロパティが更新されるので、 現在位置からいきなりfromの位置に移動して、そこから現在位置にトゥイーンしてしまうのを防ぐ。

eaze(target).delay(1).from(1, {x:300}).updateNow();

とりあえず基本的な使い方はこんな感じ。
サクサクッとかけていい感じですねー。メソッドチェーン楽しい！


あとからスペシャルプロパティ系もまとめてみます。

ちなみにFlex用のラッパーでeazefxってのもあるみたいです。
eazefx - Project Hosting on Google Code
http://code.google.com/p/eazefx/