[AS3][物体的运动]
1.速度与加速度
物体的运动都是沿着一定的方向,以恒定或是加速度的方式的运动的。在FALSH中要使物体以一个恒定的速度运动,就需要我们在每一帧不断的累加恒定的速度。这里面我们使用一种帧的循环的方式,来使物体不断的累加恒定的速度,以达到目的地。
1.1.恒速
var speedY;
ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);
function onEnterFrame(event:Event):void{
ball.x += speedX;
ball.y += speedY;
}
1.2.角度
当物体的运动不是沿着水平或竖直的方向时,我们就需要用到三角函数了。
2 var angle = 15;
3 var radian = angle * Math.PI/180;
4 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);
5 function onEnterFrame(event:Event):void{
6 vx = Math.cos(radians)*speed;
7 vy = Math.sin(radians)*speed;
8 ball.x += vx;
9 ball.y += vy;
10 }
11
1.3.1加速度
物理学中的加速度公式是vt = v0 + at。FLASH中的应用基本类似,只是将时间用时间轴代替了。所以用公式vx += ax;即可实现。
var vx;
ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);
function onEnterFrame(event:Event):void{
vx += ax;
ball.x += vx;
}
1.3.2.重力
重力实际上就是加速度,但它有一个特殊性是只做用在y轴上,我们把重力定义成grav,与上面的加速度类似。
2.弹力
弹性,一般是指物体接触到到某个边界,所进行的回弹,在FLASH中,我们需要做的是设置好边界,以及物体回弹的方向。那么如何确定它回弹的方向呢,我们设定一个边界,当小球超出边界时小球回弹,也就是方向改变了。以x轴为例应为:vx *= -1;实际上你可能发现它实际上就是vx = -vx;
2.1.弹性中无能量损失
2 var top=0;
3 var left=0;
4 var right=400;
5 var bottom=300;
6 var vx=10;
7 var vy=10;
8 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);
9 function onEnterFrame(event:Evnet):void{
10 if(ball.x + ball.width > right){
11 ball.x = right - ball.width ;
12 vx *= -1;
13 }
14 if(ball.x < left){
15 ball.x = left ;
16 vx *= -1;
17 }
18 if(ball.y + ball.height > bottom){
19 ball.y = bottom - ball.height ;
20 vy *= -1;
21 }
22 if(ball.y < top){
23 ball.y = top ;
24 vy *= -1;
25 }
26 }
2.2.弹性中有能量损失
在上面的例子,小球在回弹时我们设定当碰到边界时直接回弹,也就是vx *= -1;并没有能量的损失,但在现实生活中,小球在回弹时要有一定的能量损失,其中还要有重力加速度的影响,通过上面的例子我们可以得出结论,当回弹速度设为1时无能量损失,其中的负号只是代表方向,当小于1时会产生能量损失,也就是我们通常说的摩擦,如:vx *= -0.7;
2 var top=0;
3 var left=0;
4 var right=400;
5 var bottom=300;
6 //设定重力加速度变量garv
7 var garv=0.5;
8 var vx=10;
9 var vy=10;
10 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);
11 function onEnterFrame(event:Evnet):void{
12 //反弹and弹性中的能量损失
13 vy+=garv;
14
15 if(ball.x + ball.width > right){
16 ball.x = right - ball.width ;
17 vx *= -0.7;
18 }
19 if(ball.x < left){
20 ball.x = left ;
21 vx *= -0.7;
22 }
23 if(ball.y + ball.height > bottom){
24 ball.y = bottom - ball.height ;
25 vy *= -0.7;
26 }
27 if(ball.y < top){
28 ball.y = top ;
29 vy *= -0.7;
30 }
31 }
3.弹簧弹力
3.1.基本弹簧
弹簧的实现方法为定义一个目标点,计算出到它的距离,加速度为距离与摩擦系数的积,同时还需要使用摩擦。
2 var targetx = 200;
3 var targety = 150;
4 var fraction = 0.9;
5 var vx = 0;
6 var vy = 0;
7 var dx = 0;
8 var dy = 0;
9 ball.x = targetx;
10 ball.y = targety;
11
12 ball.addEventListener(MouseEvent.MOUSE_DOWN , drag);
13 ball.addEventListener(MouseEvent.MOUSE_UP , drop);
14
15 function start(event:Event):void{
16 if(!dragging){
17 dx = targetx - ball.x ;
18 dy = targety - ball.y ;
19 vx += dx*.3;
20 vy += dy*.3;
21 vx *= fraction;
22 vy *= fraction;
23 ball.x += vx;
24 ball.y += vy;
25 }
26 }
27 function drag(event:MouseEvent):void{
28 ball.addEventListener(Event.ENTER_FRAME , start);
29 ball.startDrag();
30 dragging = true;
31 }
32 function drop(event:MouseEvent):void{
33 ball.stopDrag();
34 dragging = false;
35 }
3.2.与鼠标相连的弹簧
我们把上例进行一下简单的扩展,我们可以将目标地点设为光标的坐标值,同时可以使用drawing api用画线的方式将其相连起来。
2 var vx = 0;
3 var vy = 0;
4 var dx = 0;
5 var dy = 0;
6 ball.x = 200;
7 ball.y = 150;
8 ball.addEventListener(Event.ENTER_FRAME , start);
9
10 function start(event:Event):void{
11 var dx = mouseX - ball.x - ball.width/2;
12 var dy = mouseY - ball.y ;
13 vx += dx*.3;
14 vy += dy*.3;
15 vx *= fraction;
16 vy *= fraction;
17 ball.x += vx;
18 ball.y += vy;
19 //画线与mouse相连
20 this.graphics.clear();
21 this.graphics.lineStyle(1,0,100);
22 this.graphics.moveTo(mouseX,mouseY);
23 this.graphics.lineTo(ball.x + ball.width/2,ball.y + ball.height/2);
24 }
一个弹簧链效果:
var grav:Number=20;
my_mc.vx = 0;
my_mc.vy = 0;
my_mc1.vx = 0;
my_mc1.vy = 0;
my_mc2.vx = 0;
my_mc2.vy = 0;
addEventListener(Event.ENTER_FRAME ,loop)
function loop(e):void {
graphics.clear();
graphics.lineStyle(1, 0xffffff, 1);
graphics.moveTo(mouseX, mouseY);
spring(my_mc, mouseX, mouseY);
spring(my_mc1, my_mc.x, my_mc.y);
spring(my_mc2, my_mc1.x, my_mc1.y);
};
function spring(mc, x, y) {
var dx:Number = x-mc.x;
var dy:Number = y-mc.y;
mc.vx += dx*.3;
mc.vy += dy*.3;
mc.vy += grav;
mc.vx *= fraction;
mc.vy *= fraction;
mc.x += mc.vx;
mc.y += mc.vy;
graphics.lineTo(mc.x, mc.y);
}