2010.04.21
13:07
author: taikiken
0件のコメント
GoogleCode : eaze-tween
EazeTweenを試してみました。
連続するモーションを直感的に記述できるのが便利です。
モーションを一時中断したり再開したりするのが驚くほど簡単に実現できます。
もちろんキャンセルするのも簡単です。
複数のインスタンスを操作するのはちょっとめんどくさいかな。
今のところ（？）な挙動は無いようです。
処理スピードはどうなんだろう。
まぁ、処理スピードも重要ですが、TweenEngineは直感的に記述できてコーディグの負担が減る方が嬉しいことが多いのも事実です。
また新しい選択肢ができてしまいました。
うれしいけど、こまるよなぁー、どれ使うか・・・
EazeTween DEMO
import aze.motion.eaze;
import aze.motion.EazeTween;
import aze.motion.easing.*;
eaze(target0).to(1).tint(0xff0000);
eaze(target1).delay(.1).to(1).tint(0xff0000);
eaze(target2).delay(.1).to(1).tint(0xff0000);
eaze(target3).delay(.1).to(1).tint(0xff0000);
eaze(target4).delay(.1).to(1).tint(0xff0000);
eaze(target5).delay(.1).to(1).tint(0xff0000);
eaze(target6).delay(.1).to(1).tint(0xff0000);
eaze(target7).delay(.1).to(1).tint(0xff0000);
eaze(target8).delay(.1).to(1).tint(0xff0000);
eaze(target9).delay(.1).to(1).tint(0xff0000).onComplete(
function ():void {
var i:uint;
var limit:uint = 10;
for (i = 0; i < limit; i++) {
eaze(root["target" + i]).delay(.5).to(1.5, {y:240, rotation:720})
.delay(.4).to(1).tint(0xffff00)
.delay(.5).to(1).tint(0xffffff)
.delay(.5).onComplete(function ():void {
var j:uint;
var ezt:EazeTween;
for (j = 0; j < limit; j++) {
ezt = eaze(root["target" + j]).delay(.1 * j).to(1, {rotation:360}).easing(Back.easeOut)
.delay(1).to(1, {rotation:-360}).tint(0x00ffff).easing(Back.easeOut);
if (j == limit - 1) {
ezt.delay(1).onComplete(function ():void {
var k:uint;
for (k = 0; k < limit; k++) {
ezt = eaze(root["target" + k]).delay(.2 * k).to(1.5, {y:35, rotation:720}).tint(0xffffff);
if (k == limit - 1) {
ezt.onComplete(trace, "END");
}
}
}
);
}
}
}
);
}
}
); |
import aze.motion.eaze;
import aze.motion.EazeTween;
import aze.motion.easing.*;
eaze(target0).to(1).tint(0xff0000);
eaze(target1).delay(.1).to(1).tint(0xff0000);
eaze(target2).delay(.1).to(1).tint(0xff0000);
eaze(target3).delay(.1).to(1).tint(0xff0000);
eaze(target4).delay(.1).to(1).tint(0xff0000);
eaze(target5).delay(.1).to(1).tint(0xff0000);
eaze(target6).delay(.1).to(1).tint(0xff0000);
eaze(target7).delay(.1).to(1).tint(0xff0000);
eaze(target8).delay(.1).to(1).tint(0xff0000);
eaze(target9).delay(.1).to(1).tint(0xff0000).onComplete(
function ():void {
var i:uint;
var limit:uint = 10;
for (i = 0; i < limit; i++) {
eaze(root["target" + i]).delay(.5).to(1.5, {y:240, rotation:720})
.delay(.4).to(1).tint(0xffff00)
.delay(.5).to(1).tint(0xffffff)
.delay(.5).onComplete(function ():void {
var j:uint;
var ezt:EazeTween;
for (j = 0; j < limit; j++) {
ezt = eaze(root["target" + j]).delay(.1 * j).to(1, {rotation:360}).easing(Back.easeOut)
.delay(1).to(1, {rotation:-360}).tint(0x00ffff).easing(Back.easeOut);
if (j == limit - 1) {
ezt.delay(1).onComplete(function ():void {
var k:uint;
for (k = 0; k < limit; k++) {
ezt = eaze(root["target" + k]).delay(.2 * k).to(1.5, {y:35, rotation:720}).tint(0xffffff);
if (k == limit - 1) {
ezt.onComplete(trace, "END");
}
}
}
);
}
}
}
);
}
}
);
eaze を使えば簡単にモーションができるようです。
eaze の戻り値は EazeTween インスタンスになります。
EazeTween には連続モーション用の chain メソッドがあるのでこんな入れ子にしなくてもいいのかも。
pause, resume, stop は static で用意されているので簡単に使えます。
// stop
EazeTween.killAllTweens();
// pause
EazeTween.pauseAllTweens();
// resume
EazeTween.resumeAllTweens(); |
// stop
EazeTween.killAllTweens();
// pause
EazeTween.pauseAllTweens();
// resume
EazeTween.resumeAllTweens();
pause後にstop した後、別のモーションをするためにはいったんEazeTween.resumeAllTweens(); をしてあげないといけないようでした。
easing関数は引数が違うのでEazeTweenの関数を使わなくてはいけません。
用意されているイージング クラスは以下のとおりです。
Back
Cubic
Elastic
Expo
Linear
Quadratic
Quart
Quint
