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二个方向加速度随位移影响的叠加，而第三个示例，则可以看作是任何方向这种影响再叠加重力的综合效果。总之：任何方向的弹性运动，都可以认为是该方向的加速度(或力)随位移的影响，而且这种影响可以在多个方向上叠加。下面这个是多点控制弹性运动的示例：