Flash/Flex学习笔记(38)：缓动动画
缓动 与 匀变速 看上去很类似，但其实有区别：
匀变速的公式为 V = V0 + at --速度v与时间t是线性(正比)关系，而且这种运动不需要确定目标点，速度可以按照这种规律一直变下去
而缓动指的是物体越接近目标时速度越慢，速度跟距离成反比关系，用公式描述为 V = k S (0<k<1)，这种运动需要先确定一个目标点，比如车辆定点停车：先指定一个位置，然后汽车从远处开过来，快到停车点时，逐渐慢下来，直到准确停在指定位置。
先看个演示：
代码：
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 Easing1 extends Sprite {
09 private var ball:Ball;
10 private var easing:Number=0.15;
11 private var targetX:Number=stage.stageWidth/2;
12 private var targetY:Number=stage.stageHeight/2;
13
14 public function Easing1() {
15 trace(targetX,targetY);
16 init();
17 }
18
19 private function init():void {
20 ball=new Ball(10) ;
21 ball.x = Math.random() * stage.stageWidth;
22 ball.y = Math.random() * stage.stageHeight;
23 addChild(ball);
24 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
25
26 ball.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
27 stage.addEventListener(MouseEvent.MOUSE_UP,MouseUpHandler);
28 ball.addEventListener(MouseEvent.MOUSE_OVER,function(){ Mouse.cursor = MouseCursor.HAND;});
29
30 //在中心画个十字架
31 graphics.lineStyle(1);
32 graphics.moveTo(targetX-15,targetY);
33 graphics.lineTo(targetX+15,targetY);
34 graphics.moveTo(targetX,targetY -15);
35 graphics.lineTo(targetX,targetY +15);
36
37 }
38
39
40 private function EnterFrameHandler(e:Event):void {
41 var vx:Number = (targetX - ball.x) * easing; //x轴速度与距离成正比缩小
42 var vy:Number = (targetY - ball.y) * easing; //y轴速度与距离成正比缩小
43 ball.x += vx;
44 ball.y += vy;
45
46 var dx = ball.x - targetX;
47 var dy = ball.y - targetY;
48 var dist = Math.sqrt(dx*dx + dy*dy);
49 //当物体达到目标点时，停止处理，以节省CPU资源
50 if (dist<=1){
51 removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
52 }
53
54 }
55
56 //开始拖动
57 private function MouseDownHandler(e:MouseEvent):void{
58 ball.startDrag();
59 removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
60
61 }
62
63 //停止拖动
64 private function MouseUpHandler(e:MouseEvent):void{
65 ball.stopDrag();
66 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
67 Mouse.cursor = MouseCursor.AUTO;
68 }
69 }
70 }
特别要注意的问题:
先来了解一下著名的"Xeno悖论"，假如一个物体要从A点移动到B点，可以这样处理：每次将物体移动一半的距离，然后再以物体所在新位置为A点，继续前面的处理... 这样物体会不断向B点靠近，直到移动到B点；但从另一角度考虑，因为每次只移动一半的距离，所以永远也不可能真正达到B点。
如果我们把上面代码中的比例因子private var easing:Number=0.15;改成0.5，就形成了该悖论。同时再考虑另一个因素，Flash每次能将物体移动的最小距离为0.05象素(即1/20象素)，比这个值再小的距离，Flash将不会处理。
这样的话，假设物体要移动到 100的x坐标位置，当前已经到了99.95，根据比例因子0.5的设置，下一次应该移动 (100 - 99.95)/2 = 0.025，这个值已经超出了Flash的处理能力，系统会把0.025当成0来处理，即不移动。
所以再回头看上面的代码，我们在判断物体是否到达目标点时，不能用 ball.x == targetX 来精确判断，因为这样的条件也许永远不会成立，从而导致后面的removeEventListener也永远不会被执行到，合理的做法是达到一定的精度值时，就可以认为已经移动完成，从而做出相应的处理.
缓动鼠标跟随
相信大多数人都玩过“星际”，我最喜欢神族的航母舰队：浩浩荡荡很是壮观。这里面有一个细节，我们可以在一队航母中，指定一个为领队，其它随便挑一个跟着它，然后后面的再跟着第二个，第三个跟着第二个...，这样出发时，其实就很接近下面要演示的缓动鼠标跟随
代码：
01 package {
02
03 import flash.display.Sprite;
04 import flash.events.MouseEvent;
05 import flash.events.Event;
06
07
08 public class Easing3 extends Sprite {
09
10 var arrBall:Array ;
11 var targetX:Number ;
12 var targetY:Number;
13 var easing:Number = 0.3;
14 var firstBall:Ball;
15
16 public function Easing3():void{
17 init();
18 }
19
20 private function init():void{
21 arrBall = new Array(30);
22 for(var i:uint=0,j:uint=arrBall.length;i<j;i++){
23 arrBall[i] = new Ball(10,Math.random() * 0xffffff);
24 addChild(arrBall[i]);
25 }
26
27 firstBall = arrBall[0];
28 firstBall.x = Math.random() * stage.stageWidth;
29 firstBall.y = Math.random() * stage.stageHeight;
30
31 targetX = stage.stageWidth/2;
32 targetY = stage.stageHeight/2;
33
34 stage.addEventListener(MouseEvent.MOUSE_DOWN,MouseDownHandler);
35 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
36 }
37
38 private function MouseDownHandler(e:MouseEvent):void{
39 targetX = mouseX;
40 targetY = mouseY;
41 addEventListener(Event.ENTER_FRAME,EnterFrameHandler);
42 }
43
44 private function EnterFrameHandler(e:Event):void{
45 firstBall.vx = (targetX - firstBall.x) * easing;
46 firstBall.vy = (targetY - firstBall.y) * easing;
47 firstBall.x += firstBall.vx;
48 firstBall.y += firstBall.vy;
49
50 for(var i=1,j=arrBall.length;i<j;i++){
51 var ball:Ball = arrBall[i];
52 ball.vx = (arrBall[i-1].x-ball.x)*easing;
53 ball.vy = (arrBall[i-1].y-ball.y)*easing;
54 ball.x += ball.vx;
55 ball.y += ball.vy;
56 }
57
58 var lastBall:Ball = arrBall[arrBall.length-1];
59 var dx = lastBall.x - targetX;
60 var dy = lastBall.y - targetY;
61 var dist = Math.sqrt(dx*dx + dy*dy);
62
63 trace(dist);
64 if (dist<=10){
65 removeEventListener(Event.ENTER_FRAME,EnterFrameHandler);
66 }
67 }
68 }
69 }
如果把这个例子稍加改造，可能效果更cool:
最后：本文所提到的缓动均指越来越慢，实际上Flash/Silverlight的IDE界面提供的缓动类型更多（比如先慢慢启动，再慢慢停止--即淡入淡出之类），对应的公式也有不少,www.robertpenner.com 大家可以到这上面找找，一定会发现不好好东西
