Flash/Flex学习笔记(34)：弹性运动
动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律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二个方向加速度随位移影响的叠加，而第三个示例，则可以看作是任何方向这种影响再叠加重力的综合效果。总之：任何方向的弹性运动，都可以认为是该方向的加速度(或力)随位移的影响，而且这种影响可以在多个方向上叠加。下面这个是多点控制弹性运动的示例：