イージング1 アキレスと亀

2010.11.14kickbaseActionScript3.0


今回はイージングについて解説します。「アキレスと亀」と呼ばれる非常に有名なイージングの公式についてのお話です。古くから知られる手法なのでご存知の方も多いかと思いますが、後述する「スムージング(線形補間)プリローダー」を実装するために不可欠な知識なので、紹介しておくことにしました。Tweenerをはじめ、BetweenAS3やTween Max、Tweensy等、様々なイージングを行ってくれるトゥイーンエンジンは多くありますが、まずは独自実装で簡単なイージングを使えるようになりましょう。

This movie requires Flash Player 9

※ステージをクリックしてください

01 : イージングなし

最も簡単な実装です。ステージに対してマウスクリックイベントをリスンさせ、クリックされたx座標に円を移動させます。

Main

package 
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "80", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		private var ball:Ball = new Ball(); 
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			//ステージ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			ball.x = ball.y = 40;
			addChild(ball);
			
			//stageに対しMouseEvent.CLICKをリスン
			stage.addEventListener(MouseEvent.CLICK, onClick);
		}
		
		private function onClick(e:MouseEvent):void 
		{
			//目的地をtargetXとして宣言。マウスクリックされた時点でのステージX座標を代入します。
			var targetX:Number = e.stageX;
			
			//ballを目的地に移動させます
			ball.x = targetX;
		}
	}
}

02 : イージング

イージングの公式(アキレスと亀)

オブジェクトの座標 += (目的地の座標 - 現在のオブジェクトの座標) * 摩擦係数

目的地から現在のオブジェクトの座標を引くと、目的地までの距離が算出されます。そしてその距離に摩擦係数(1より小さい数)をかけた値を足すという手法になります。言葉だけだと説明が難しいので、下図を参照していただきたいのですが、「目的地に近づくにつれ、足される数が小さくなる」と言う点がポイントとなります。この計算をすることにより、目的地に近づくにつれ減速するというモーションが表現されるわけです。

Main

package 
{
	import flash.display.Sprite;
	import flash.display.StageAlign;
	import flash.display.StageScaleMode;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	/**
	 * ...
	 * @author kickbase
	 */
	[SWF(width = "640", height = "80", frameRate = "30", backgroundColor = "#ffffff")]
	 
	public class Main extends Sprite 
	{
		private var ball:Ball = new Ball(); 
		private var targetX:Number = 40;//目的地を宣言(ballの初期位置と同じ40を初期値としました)
		
		/*--------------------------------------------------------------------------
		 * 0だと動きません
		 * 0~1の間で設定すると、減速しながら目的地に近づきます
		 * 
		 * 1~2の間で設定するとどうなるか?2より大きい値で設定するとどうなるか?
		 * 上記説明については割愛しますが、実際に計算をしてみると理解が深まると思います。
		 *---------------------------------------------------------------------*//**
		 * @param friction <p>摩擦係数</p>
		 */
		private var friction:Number = 0.3;
		
		public function Main():void 
		{
			if (stage) init();
			else addEventListener(Event.ADDED_TO_STAGE, init);
		}
		
		private function init(e:Event = null):void 
		{
			removeEventListener(Event.ADDED_TO_STAGE, init);
			
			//ステージ設定
			stage.scaleMode = StageScaleMode.NO_SCALE;
			stage.align = StageAlign.TOP_LEFT;
			
			ball.x = ball.y = 40;
			addChild(ball);
			
			//stageに対しMouseEvent.CLICKをリスン
			stage.addEventListener(MouseEvent.CLICK, onClick);
			
			//エンターフレームイベントをリスン
			addEventListener(Event.ENTER_FRAME, loop);
		}
		
		private function onClick(e:MouseEvent):void 
		{
			//インスタンスメンバであるtargetXにマウスクリックされた時点でのステージX座標を代入します。
			targetX = e.stageX;
		}
		
		private function loop(e:Event):void 
		{
			//「アキレスと亀」と呼ばれるイージングの公式です。
			ball.x += (targetX - ball.x) * friction;
		}		
	}
}

サンプルのダウンロード


ページトップへ