原文地址:http://www.cnblogs.com/Memo/archive/2008/01/02/1022625.html
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.角度
当物体的运动不是沿着水平或竖直的方向时,我们就需要用到三角函数了。
ar 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); }