Flash/Flex学习笔记(39)：弹性运动

动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律F=Kx)振动

先看下面的模拟演示：

规律：
小球先从出发点(初始为最左侧)向目标点(中心点)加速狂奔，奔的过程中速度越来越大，但加速度越来越小，等经过目标点时，发现速度太大刹不住车(此时速度达到最大值，但加速度减为0)，奔过头了！于是加速度发生逆转，从0开始变为负值，从而导致速度越来越小，等速度减到0时，也奔到了最右侧(此时负加速度也达到最大值)，然后在负加速度的影响下，开始掉头又狂奔....这样不断下去，直接摩擦力让它筋疲力尽，最终瘫倒在目标点 :)

公式：胡克定律F=Kx，而合外力F根据牛二定律 F=ma，这二者结合起来换算一下，也就是 ma = kx，即a = (k/m)x .用代码体现出来，即加速度与位移成(正比)线性关系。 

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.geom.Rectangle;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;

	public class Spring1 extends Sprite {
		private var ball:Ball;
		private var spring:Number=0.02;
		private var targetX:Number=stage.stageWidth/2;
		private var rect:Rectangle;
		private var vx:Number=0;
		private var isDragging=false;

		public function Spring1() {
			init();
		}

		private function init():void {
			ball=new Ball(10);
			addChild(ball);
			ball.x=20;
			ball.y=stage.stageHeight/2;
			addEventListener(Event.ENTER_FRAME, onEnterFrame);

			ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
			ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND});
			ball.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
			stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
			
			//画辅助线
			graphics.lineStyle(1);
			graphics.moveTo(ball.x,ball.y);
			graphics.lineTo(stage.stageWidth-ball.x,ball.y);
			graphics.moveTo(stage.stageWidth/2,ball.y-10);
			graphics.lineTo(stage.stageWidth/2,ball.y+10);

			rect=new Rectangle(ball.x,ball.y,stage.stageWidth-2*ball.x,0);
		}

		private function MouseOutHandler() {
			if (! isDragging) {
				Mouse.cursor=MouseCursor.AUTO;
			}
		}


		//开始拖动
		private function MouseDownHandler(e:MouseEvent):void {
			ball.startDrag(true,rect);
			Mouse.cursor=MouseCursor.HAND;
			removeEventListener(Event.ENTER_FRAME, onEnterFrame);
			isDragging=true;

		}
		
		//结束拖动
		private function MouseUpHandler(e:MouseEvent):void {
			ball.stopDrag();
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			Mouse.cursor=MouseCursor.AUTO;
			isDragging=false;
		}

		private function onEnterFrame(event:Event):void {
			var dx:Number = targetX-ball.x;
			var ax:Number = dx*spring;//加速度与位移成正(反)比关系
			vx += ax;
			vx *= 0.97;//摩擦系数
			trace(ax,vx);
			ball.x+=vx;

		}
	}
}

上面演示是一维的弹性运动，当然也可以同时在x轴和y轴上进行

代码：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	
	public class Spring2 extends Sprite {
		private var ball:Ball;
		private var spring:Number=0.1;
		private var targetX:Number=stage.stageWidth/2;

		private var targetY:Number=stage.stageHeight/2;
		private var vx:Number=0;
		private var vy:Number=0;
		private var friction:Number=0.95;
		
		public function Spring2() {
			init();
		}
		private function init():void {
			ball = new Ball(5);
			ball.x = Math.random() * stage.stageWidth;
			ball.y = Math.random() * stage.stageHeight;			
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
			stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);	
			MouseDownHandler(null);
			Mouse.cursor = MouseCursor.BUTTON;
		}
		
		function MouseDownHandler(e:MouseEvent):void{
			graphics.clear();
			ball.x = Math.random() * stage.stageWidth;
			ball.y = Math.random() * stage.stageHeight;
			ball.vx = (Math.random()*2-1) * 50;
			ball.vy = (Math.random()*2-1) * 50;
			graphics.moveTo(ball.x,ball.y);			
		}
		
		private function EnterFrameHandler(event:Event):void {
			//去掉下面的注释，就变成鼠标跟随的弹性运动
			//targetX = mouseX;
			//targetY = mouseY;
			var dx:Number=targetX-ball.x;
			var dy:Number=targetY-ball.y;
			var ax:Number=dx*spring;
			var ay:Number=dy*spring;
			vx+=ax;
			vy+=ay;
			vx*=friction;
			vy*=friction;
			ball.x+=vx;
			ball.y+=vy;
			graphics.lineStyle(0.3,0xbbbbbb,1);
			graphics.lineTo(ball.x,ball.y);
		}
	}
}

接下来：用代码模仿一根猴皮筋儿

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	
	public class Spring3 extends Sprite {
		private var ball:Ball;
		private var spring:Number=0.1;
		private var vx:Number=0;
		private var vy:Number=0;
		private var friction:Number=0.95;
		
		
		public function Spring3() {
			init();
		}
		private function init():void {
			ball = new Ball(10);
			addChild(ball);
			addEventListener(Event.ENTER_FRAME, onEnterFrame);
			Mouse.cursor = MouseCursor.HAND;
		}
		private function onEnterFrame(event:Event):void {
			var dx:Number = mouseX-ball.x;
			var dy:Number = mouseY-ball.y;
			var ax:Number = dx*spring;
			var ay:Number = dy*spring;
			vx+=ax;
			vy+=ay;
			
			vx*=friction;
			vy*=friction;
			ball.x+=vx;
			ball.y+=vy;
			graphics.clear();
			graphics.lineStyle(1);			
			graphics.moveTo(mouseX, mouseY);
			graphics.lineTo(ball.x, ball.y);
		}
	}
}

上面的例子只有一个球，如果考虑更多的小球，第一球以鼠标所在位置为目标做弹性运动，而第二个以第一个球为目标做弹性运动，第三球又跟着第二个... 这会是什么效果呢?

package {

	import flash.display.Sprite;
	import flash.events.MouseEvent;
	import flash.events.Event;

	public class ArrayChain extends Sprite {

		var arrBall:Array;		
		var spring:Number=0.12;
		var firstBall:Ball;
		var gravity:Number=6;
		var friction:Number=0.8;

		public function ArrayChain() {			
			init();
		}
		
		private function init():void {
			arrBall=new Array(5);
			for (var i:uint=0,j:uint=arrBall.length; i<j; i++) {
				arrBall[i]=new Ball(10,Math.random()*0xffffff);
				addChild(arrBall[i]);
			}
			firstBall=arrBall[0];
			firstBall.x=Math.random()*stage.stageWidth;
			firstBall.y=Math.random()*stage.stageHeight;	
			addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
		}

		private function EnterFrameHandler(e:Event):void {
			//第一个球以鼠标所在位置为目标做弹性运动
			firstBall.vx += (mouseX - firstBall.x) * spring;
			firstBall.vy += (mouseY - firstBall.y) * spring;
			firstBall.vy+=gravity;
			firstBall.vx*=friction;
			firstBall.vy*=friction;
			firstBall.x+=firstBall.vx;
			firstBall.y+=firstBall.vy;

			//准备画连线
			graphics.clear();
			graphics.lineStyle(0.2,0x666666);
			graphics.moveTo(mouseX,mouseY);
			graphics.lineTo(firstBall.x,firstBall.y);

			//后面的小球依次以前一个的位置为目标做弹性运动
			for (var i=1,j=arrBall.length; i<j; i++) {
				var ball:Ball=arrBall[i];
				ball.vx += (arrBall[i-1].x-ball.x)*spring;
				ball.vy += (arrBall[i-1].y-ball.y)*spring;
				ball.vy+=gravity;
				ball.vx*=friction;
				ball.vy*=friction;
				ball.x+=ball.vx;
				ball.y+=ball.vy;
				graphics.lineTo(ball.x,ball.y);//画出连线将各球连在一起
			}
		}
	}

}

ok,我们得到了一个"弹簧链"，当然这里面还考虑了重力的因素，通过上面的几个例子可以总结一下:第一个示例中一维弹性运动可以看作为x方向的加速度随位移的影响，而第二个示例可以看作是x,y二个方向加速度随位移影响的叠加，而第三个示例，则可以看作是任何方向这种影响再叠加重力的综合效果。总之：任何方向的弹性运动，都可以认为是该方向的加速度(或力)随位移的影响，而且这种影响可以在多个方向上叠加。下面这个是多点控制弹性运动的示例：

package {
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	import flash.ui.Mouse;
	import flash.ui.MouseCursor;
	
	public class MultiSpring extends Sprite {
		
		private var ball:Ball;
		private var handles:Array;
		private var spring:Number=0.3;
		private var friction:Number=0.8;
		private var numHandles:Number=5;
		
		public function MultiSpring() {
			init();
		}
		
		private function init():void {
			ball=new Ball(20);
			addChild(ball);
			handles = new Array();
			
			//创建控制(点)小球
			for (var i:uint = 0; i < numHandles; i++) {
				var handle:Ball=new Ball(10,0x0000ff);
				handle.x=Math.random()*stage.stageWidth;
				handle.y=Math.random()*stage.stageHeight;
				handle.addEventListener(MouseEvent.MOUSE_DOWN, MouseDownHandler);
				addChild(handle);
				handles.push(handle);
				handle.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);
				handle.addEventListener(MouseEvent.MOUSE_OVER,MouseOverHandler);
			}
			addEventListener(Event.ENTER_FRAME, EnterFrameHandler);
			addEventListener(MouseEvent.MOUSE_UP, MouseUpHandler);		
			
		}
		
		
		
		function MouseOutHandler(e:MouseEvent):void{
			Mouse.cursor = MouseCursor.AUTO;
		}
		
		function MouseOverHandler(e:MouseEvent):void{
			Mouse.cursor = MouseCursor.HAND;
		}
		
		private function EnterFrameHandler(event:Event):void {
			
			//将各控制点的位置做为目标位置，叠加弹性运动
			for (var i:uint = 0; i < numHandles; i++) {
				var handle:Ball=handles[i] as Ball;
				var dx:Number=handle.x-ball.x;
				var dy:Number=handle.y-ball.y;
				ball.vx+=dx*spring;
				ball.vy+=dy*spring;
			}
			
			ball.vx*=friction;
			ball.vy*=friction;
			ball.x+=ball.vx;
			ball.y+=ball.vy;
			graphics.clear();
			graphics.lineStyle(1);
			for (i = 0; i < numHandles; i++) {
				graphics.moveTo(ball.x, ball.y);
				graphics.lineTo(handles[i].x, handles[i].y);
			}
		}
		
		private function MouseDownHandler(e:MouseEvent):void {
			e.target.startDrag();
		}
		
		private function MouseUpHandler(event:MouseEvent):void {
			stopDrag();
		}
	}
}