动画中的弹性运动 从视觉效果上接近 物理经典力学中的单摆运动或弹簧(胡克定律F=Kx)振动
先看下面的模拟演示：
规律： 小球先从出发点(初始为最左侧)向目标点(中心点)加速狂奔，奔的过程中速度越来越大，但加速度越来越小，等经过目标点时，发现速度太大刹不住车(此时速度达到最大值，但加速度减为0)，奔过头了！于是加速度发生逆转，从0开始变为负值，从而导致速度越来越小，等速度减到0时，也奔到了最右侧(此时负加速度也达到最大值)，然后在负加速度的影响下，开始掉头又狂奔....这样不断下去，直接摩擦力让它筋疲力尽，最终瘫倒在目标点 :)
公式：胡克定律F=Kx，而合外力F根据牛二定律 F=ma，这二者结合起来换算一下，也就是 ma = kx，即a = (k/m)x .用代码体现出来，即加速度与位移成(正比)线性关系。
代码语言：javascript复制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轴上进行
代码：
代码语言：javascript复制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);
}
}
}接下来：用代码模仿一根猴皮筋儿
代码语言：javascript复制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);
}
}
}上面的例子只有一个球，如果考虑更多的小球，第一球以鼠标所在位置为目标做弹性运动，而第二个以第一个球为目标做弹性运动，第三球又跟着第二个... 这会是什么效果呢?
代码语言：javascript复制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二个方向加速度随位移影响的叠加，而第三个示例，则可以看作是任何方向这种影响再叠加重力的综合效果。总之：任何方向的弹性运动，都可以认为是该方向的加速度(或力)随位移的影响，而且这种影响可以在多个方向上叠加。下面这个是多点控制弹性运动的示例：
代码语言：javascript复制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();
}
}
}
