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

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

先看下面的模拟演示：

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

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

show sourceview source

print?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
import flash.events.MouseEvent;

05
import flash.geom.Rectangle;

06
import flash.ui.Mouse;

07
import flash.ui.MouseCursor;

08

09
public class Spring1 extends Sprite {

10
private var ball:Ball;

11
private var spring:Number=0.02;

12
private var targetX:Number=stage.stageWidth/2;

13
private var rect:Rectangle;

14
private var vx:Number=0;

15
private var isDragging=false;

16

17
public function Spring1() {

18
init();

19
}

20

21
private function init():void {

22
ball=new Ball(10);

23
addChild(ball);

24
ball.x=20;

25
ball.y=stage.stageHeight/2;

26
addEventListener(Event.ENTER_FRAME, onEnterFrame);

27

28
ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);

29
ball.addEventListener(MouseEvent.MOUSE_OVER,function(){Mouse.cursor = MouseCursor.HAND});

30
ball.addEventListener(MouseEvent.MOUSE_OUT,MouseOutHandler);

31
stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);

32

33
//画辅助线

34
graphics.lineStyle(1);

35
graphics.moveTo(ball.x,ball.y);

36
graphics.lineTo(stage.stageWidth-ball.x,ball.y);

37
graphics.moveTo(stage.stageWidth/2,ball.y-10);

38
graphics.lineTo(stage.stageWidth/2,ball.y+10);

39

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

41
}

42

43
private function MouseOutHandler() {

44
if (! isDragging) {

45
Mouse.cursor=MouseCursor.AUTO;

46
}

47
}

48

49

50
//开始拖动

51
private function MouseDownHandler(e:MouseEvent):void {

52
ball.startDrag(true,rect);

53
Mouse.cursor=MouseCursor.HAND;

54
removeEventListener(Event.ENTER_FRAME, onEnterFrame);

55
isDragging=true;

56

57
}

58

59
//结束拖动

60
private function MouseUpHandler(e:MouseEvent):void {

61
ball.stopDrag();

62
addEventListener(Event.ENTER_FRAME, onEnterFrame);

63
Mouse.cursor=MouseCursor.AUTO;

64
isDragging=false;

65
}

66

67
private function onEnterFrame(event:Event):void {

68
var dx:Number = targetX-ball.x;

69
var ax:Number = dx*spring;//加速度与位移成正(反)比关系

70
vx += ax;

71
vx *= 0.97;//摩擦系数

72
trace(ax,vx);

73
ball.x+=vx;

74

75
}

76
}

77
}

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

代码：

show sourceview source

print?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
import flash.events.MouseEvent;

05
import flash.ui.Mouse;

06
import flash.ui.MouseCursor;

07

08
public class Spring2 extends Sprite {

09
private var ball:Ball;

10
private var spring:Number=0.1;

11
private var targetX:Number=stage.stageWidth/2;

12

13
private var targetY:Number=stage.stageHeight/2;

14
private var vx:Number=0;

15
private var vy:Number=0;

16
private var friction:Number=0.95;

17

18
public function Spring2() {

19
init();

20
}

21
private function init():void {

22
ball = new Ball(5);

23
ball.x = Math.random() * stage.stageWidth;

24
ball.y = Math.random() * stage.stageHeight;         

25
addChild(ball);

26
addEventListener(Event.ENTER_FRAME, EnterFrameHandler);

27
stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler); 

28
MouseDownHandler(null);

29
Mouse.cursor = MouseCursor.BUTTON;

30
}

31

32
function MouseDownHandler(e:MouseEvent):void{

33
graphics.clear();

34
ball.x = Math.random() * stage.stageWidth;

35
ball.y = Math.random() * stage.stageHeight;

36
ball.vx = (Math.random()*2-1) * 50;

37
ball.vy = (Math.random()*2-1) * 50;

38
graphics.moveTo(ball.x,ball.y);         

39
}

40

41
private function EnterFrameHandler(event:Event):void {

42
//去掉下面的注释，就变成鼠标跟随的弹性运动

43
//targetX = mouseX;

44
//targetY = mouseY;

45
var dx:Number=targetX-ball.x;

46
var dy:Number=targetY-ball.y;

47
var ax:Number=dx*spring;

48
var ay:Number=dy*spring;

49
vx+=ax;

50
vy+=ay;

51
vx*=friction;

52
vy*=friction;

53
ball.x+=vx;

54
ball.y+=vy;

55
graphics.lineStyle(0.3,0xbbbbbb,1);

56
graphics.lineTo(ball.x,ball.y);

57
}

58
}

59
}

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

show sourceview source

print?

01
package {

02
import flash.display.Sprite;

03
import flash.events.Event;

04
import flash.ui.Mouse;

05
import flash.ui.MouseCursor;

06

07
public class Spring3 extends Sprite {

08
private var ball:Ball;

09
private var spring:Number=0.1;

10
private var vx:Number=0;

11
private var vy:Number=0;

12
private var friction:Number=0.95;

13

14

15
public function Spring3() {

16
init();

17
}

18
private function init():void {

19
ball = new Ball(10);

20
addChild(ball);

21
addEventListener(Event.ENTER_FRAME, onEnterFrame);

22
Mouse.cursor = MouseCursor.HAND;

23
}

24
private function onEnterFrame(event:Event):void {

25
var dx:Number = mouseX-ball.x;

26
var dy:Number = mouseY-ball.y;

27
var ax:Number = dx*spring;

28
var ay:Number = dy*spring;

29
vx+=ax;

30
vy+=ay;

31

32
vx*=friction;

33
vy*=friction;

34
ball.x+=vx;

35
ball.y+=vy;

36
graphics.clear();

37
graphics.lineStyle(1);          

38
graphics.moveTo(mouseX, mouseY);

39
graphics.lineTo(ball.x, ball.y);

40
}

41
}

42
}

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

show sourceview source

print?

01
package {

02

03
import flash.display.Sprite;

04
import flash.events.MouseEvent;

05
import flash.events.Event;

06

07
public class ArrayChain extends Sprite {

08

09
var arrBall:Array;      

10
var spring:Number=0.12;

11
var firstBall:Ball;

12
var gravity:Number=6;

13
var friction:Number=0.8;

14

15
public function ArrayChain() {          

16
init();

17
}

18

19
private function init():void {

20
arrBall=new Array(5);

21
for (var i:uint=0,j:uint=arrBall.length; i<j; i++) {

22
arrBall[i]=new Ball(10,Math.random()*0xffffff);

23
addChild(arrBall[i]);

24
}

25
firstBall=arrBall[0];

26
firstBall.x=Math.random()*stage.stageWidth;

27
firstBall.y=Math.random()*stage.stageHeight;    

28
addEventListener(Event.ENTER_FRAME,EnterFrameHandler);

29
}

30

31
private function EnterFrameHandler(e:Event):void {

32
//第一个球以鼠标所在位置为目标做弹性运动

33
firstBall.vx += (mouseX - firstBall.x) * spring;

34
firstBall.vy += (mouseY - firstBall.y) * spring;

35
firstBall.vy+=gravity;

36
firstBall.vx*=friction;

37
firstBall.vy*=friction;

38
firstBall.x+=firstBall.vx;

39
firstBall.y+=firstBall.vy;

40

41
//准备画连线

42
graphics.clear();

43
graphics.lineStyle(0.2,0x666666);

44
graphics.moveTo(mouseX,mouseY);

45
graphics.lineTo(firstBall.x,firstBall.y);

46

47
//后面的小球依次以前一个的位置为目标做弹性运动

48
for (var i=1,j=arrBall.length; i<j; i++) {

49
var ball:Ball=arrBall[i];

50
ball.vx += (arrBall[i-1].x-ball.x)*spring;

51
ball.vy += (arrBall[i-1].y-ball.y)*spring;

52
ball.vy+=gravity;

53
ball.vx*=friction;

54
ball.vy*=friction;

55
ball.x+=ball.vx;

56
ball.y+=ball.vy;

57
graphics.lineTo(ball.x,ball.y);//画出连线将各球连在一起

58
}

59
}

60
}

61

62
}

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