[AS3][Actionscript Animation]

该篇笔记主要内容是关于速度,加速度,弹性,缓动,摩擦力,重力等内容。
参考http://www2.flash8.net/teach/6280.htm,在此对作者表示深刻的感谢。

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.加速度
物理学中的加速度公式是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.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);  
 }






   


posted @ 2008-01-02 04:40  Memo  阅读(790)  评论(0编辑  收藏  举报