缓动 与 匀变速 看上去很类似,但其实有区别:
匀变速的公式为 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 大家可以到这上面找找,一定会发现不好好东西