AS3：物体的运动

1.速度与加速度
物体的运动都是沿着一定的方向，以恒定或是加速度的方式的运动的。在FALSH中要使物体以一个恒定的速度运动，就需要我们在每一帧不断的累加恒定的速度。这里面我们使用一种帧的循环的方式，来使物体不断的累加恒定的速度，以达到目的地。
1.1.恒速

var speedX;

var speedY;

ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);

function onEnterFrame(event:Event):void{

    ball.x += speedX;

    ball.y += speedY;

}

1.2.角度
当物体的运动不是沿着水平或竖直的方向时，我们就需要用到三角函数了。

var speed = 10; 

 var angle = 15; 

 var radian = angle * Math.PI/180; 

 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);

 function onEnterFrame(event:Event):void{

     vx = Math.cos(radians)*speed; 

     vy = Math.sin(radians)*speed; 

     ball.x += vx; 

     ball.y += vy; 

 }

1.3.1加速度
物理学中的加速度公式是vt = v0 + at。FLASH中的应用基本类似，只是将时间用时间轴代替了。所以用公式vx += ax;即可实现。

var ax = 0.5;

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.弹性中无能量损失

//设定边界

 var top=0;  

 var left=0;  

 var right=400;  

 var bottom=300;

 var vx=10;  

 var vy=10; 

 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);

 function onEnterFrame(event:Evnet):void{

     if(ball.x + ball.width > right){

         ball.x = right - ball.width ;

         vx *= -1;

         }

     if(ball.x < left){

         ball.x = left ;

         vx *= -1;

         }

     if(ball.y + ball.height > bottom){

         ball.y = bottom - ball.height ;

         vy *= -1;

         }

     if(ball.y < top){

         ball.y = top ;

         vy *= -1;

         }

 }

2.2.弹性中有能量损失
在上面的例子，小球在回弹时我们设定当碰到边界时直接回弹，也就是vx *= -1;并没有能量的损失，但在现实生活中，小球在回弹时要有一定的能量损失，其中还要有重力加速度的影响，通过上面的例子我们可以得出结论，当回弹速度设为1时无能量损失，其中的负号只是代表方向，当小于1时会产生能量损失，也就是我们通常说的摩擦，如：vx *= -0.7;

//设定边界  

 var top=0;  

 var left=0;  

 var right=400;  

 var bottom=300;

 //设定重力加速度变量garv  

 var garv=0.5;

 var vx=10;  

 var vy=10; 

 ball.addEventListener(Event.ENTER_FRAME , onEnterFrame);

 function onEnterFrame(event:Evnet):void{

     //反弹and弹性中的能量损失

     vy+=garv;

     

     if(ball.x + ball.width > right){

         ball.x = right - ball.width ;

         vx *= -0.7;

         }

     if(ball.x < left){

         ball.x = left ;

         vx *= -0.7;

         }

     if(ball.y + ball.height > bottom){

         ball.y = bottom - ball.height ;

         vy *= -0.7;

         }

     if(ball.y < top){

         ball.y = top ;

         vy *= -0.7;

         }

 }

 

3.弹簧弹力
3.1.基本弹簧
弹簧的实现方法为定义一个目标点，计算出到它的距离，加速度为距离与摩擦系数的积，同时还需要使用摩擦。

var dragging = false;

 var targetx = 200;  

 var targety = 150;

 var fraction = 0.9;

 var vx = 0;

 var vy = 0;

 var dx = 0;

 var dy = 0;

 ball.x = targetx;

 ball.y = targety;

 

 ball.addEventListener(MouseEvent.MOUSE_DOWN , drag);

 ball.addEventListener(MouseEvent.MOUSE_UP , drop);

 

 function start(event:Event):void{

     if(!dragging){

         dx = targetx - ball.x ;

         dy = targety - ball.y ;

         vx += dx*.3;

         vy += dy*.3;

         vx *= fraction;

         vy *= fraction;

         ball.x += vx;

         ball.y += vy;

         }

     }

 function drag(event:MouseEvent):void{

     ball.addEventListener(Event.ENTER_FRAME , start);

     ball.startDrag();

     dragging = true;

     }

 function drop(event:MouseEvent):void{

     ball.stopDrag();

     dragging = false;

     }

3.2.与鼠标相连的弹簧
我们把上例进行一下简单的扩展，我们可以将目标地点设为光标的坐标值，同时可以使用drawing api用画线的方式将其相连起来。

var fraction = 0.9;

 var vx = 0;

 var vy = 0;

 var dx = 0;

 var dy = 0;

 ball.x = 200;

 ball.y = 150;

 ball.addEventListener(Event.ENTER_FRAME , start);

 

 function start(event:Event):void{

     var dx = mouseX - ball.x - ball.width/2;  

     var dy = mouseY - ball.y ;  

     vx += dx*.3;  

     vy += dy*.3;  

     vx *= fraction;  

     vy *= fraction;  

     ball.x += vx;  

     ball.y += vy;  

     //画线与mouse相连  

     this.graphics.clear();  

     this.graphics.lineStyle(1,0,100);  

     this.graphics.moveTo(mouseX,mouseY);  

     this.graphics.lineTo(ball.x + ball.width/2,ball.y + ball.height/2);  

  }

一个弹簧链效果：

var fraction :Number= .7;  

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);  

}