org.as3s.Tween Ver2.0の使い方(2) 単純なイージング
通常のTweenライブラリでは、基本的にTweenの持続時間を指定する必要があります。
具体的には、30フレームでx=100に、2秒間でalpha=0に、といった指定が必要です。
org.as3s.Tweenではそれらに加えて持続時間を指定しないイージングをサポートしています。
単純なイージング
ActionScriptの初歩としてよく使われるアニメーションのやり方に次のようなものがあります。
private function onEnterFrame(event:Event):void {
sp.x += (300-sp.x)*0.5;
if (Math.abs(300-sp.x)<0.1) {
sp.x = 300;
mc.removeEventListener(Event.ENTER_FRAME, onEnterFrame);
}
}
現在の値がx=0、目標値がx=300だとすると、毎フレーム目標値と現在値の差分の半分だけ進むので、
0→150→225→262.5→281.25→・・・
と移動しますが、アキレスと亀のパラドックスのように永遠に目標値には到達しないのでしきい値を設定して
差分がしきい値以内に収まったら目標値に設定して完了とします。
TweenerなどのTweenライブラリではこのようなイージングは持続時間を指定できないのでサポートしませんが、
org.as3s.Tweenでは以下のように指定することでこのタイプのイージングが可能です。
tween.start();
また、追加引数として差分に対する係数（デフォルトは0.5）としきい値（デフォルトは0.05）を指定することができます。
その場合、持続時間はnullまたは0を指定します。
tween.start();
動作サンプル（画面クリックでスタートします）
import fl.motion.easing.*;
import flash.display.MovieClip;
import flash.display.Sprite;
import flash.events.Event;
import flash.events.MouseEvent;
import flash.filters.*;
import org.as3s.Tween;
[SWF(width='700',height='300',backgroundColor='0xeeeeee',frameRate='60')]
public class TweenSample2 extends Sprite {
private var tween:Tween;
private var sp:Sprite;
public function TweenSample2() {
//Target Object
sp = new Sprite();
sp.graphics.beginFill(0x333333);
sp.graphics.drawRect(0,0,100,100);
sp.graphics.endFill();
addChild(sp);
// tween = new Tween(sp, {x:300}, Tween.easing);
tween = new Tween(sp, {x:300}, Tween.easing, null, [0.2, 0.1]);
//Event
tween.addEventListener(Tween.COMPLETE, onTweenComplete);
//Mouse Event
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function onClick(event:Event):void {
sp.x = 0;
tween.reset();
tween.start();
}
private function onTweenComplete(event:Event):void {
trace("complete!")
}
}
}