減速イージング « Animation« actionscript « ActionScript3.0 プログラミング入門 for designers

アニメーションに加速・減速の効果を付加した、直線的ではない滑らかな動きをイージング（ easing ）と呼びます。actionscript でムービークリップなどをアニメーションさせる時、イージングの効果をつけることによってより洗練されたアニメーションに魅せることができます。

目的地に向かって減速していって最後に止まるという減速イージングは比較的簡単に実装できます。

減速する仕組みは、アニメーションをさせていオブジェクトの座標と目的地の座標の差を出し目的地までの距離を取得します。その距離に対して減速係数を掛けることで 1 回に移動距離を算出します。
減速係数は目的地までの距離の何％進むかを決めています。0 であれば全く進まず、1 であれば 1 回で目的地に到達してしまいます。
この求められた値を現在のオブジェクトの座標に加算することで移動アニメーションを起こします。

移動の減速イージングアニメーションの計算は下記のようになります。

オブジェクトの座標 +=（ 目的地の座標 - オブジェクトの座標 ) * 減速係数

目的地のX座標を targetX 、Y座標を targetY とし、アニメーションをさせていオブジェクトを mc とします。減速係数を friction とすると、減速イージングアニメーションを実現するには次のようなコードなります。

mc.x += (targetX - mc.x) * friction;
mc.y += (targetY - mcp.y) * friction;

friction の値は 0 < friction < 1 の範囲で設定しなければなりません。

次の例は、MovieClip クラスのインスタンス mc を目的の座標位置 (520, 200) まで減速しながら移動していくアニメーションを設定しています。

var friction:Number = 0.3;//  0 < friction < 1 

var targetX:Number = 520;
var targetY:Number = 200;

mc.addEventListener(Event.ENTER_FRAME,easing);

function easing(event:Event):void {
	var diffX:Number = (targetX - event.target.x) * friction;
	var diffY:Number = (targetY - event.target.y) * friction;
	event.target.x += diffX;
	event.target.y += diffY;
	if (Math.abs(diffX) <= 0.1 && Math.abs(diffY) <= 0.1) {
		event.target.x=targetX;
		event.target.y=targetY;

		event.target.removeEventListener(Event.ENTER_FRAME,easing);
	}
}

次の例は、MovieClip クラスのインスタンス mc が減速イージングアニメーションしながらマウスに追従するサンプルコードです。

var friction:Number = 0.3;//  0 < friction < 1 

mc.addEventListener(Event.ENTER_FRAME,mouseTracer);

function mouseTracer(event:Event):void {
	var diffX:Number = (mouseX - event.target.x) * friction;
	var diffY:Number = (mouseY - event.target.y) * friction;
	event.target.x += diffX;
	event.target.y += diffY;
	if (Math.abs(diffX) <= 0.1 && Math.abs(diffY) <= 0.1) {
		event.target.x = mouseX;
		event.target.y = mouseY;

		event.target.removeEventListener(Event.ENTER_FRAME,mouseTracer);
	}
}

減速イージング

trackback (0)

Post your comment