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

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

先看下面的模拟演示：

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

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

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