演示发现它已经沿着x,y合速度的方向移动了。是不是觉得很容易??这里我用的vx,vy都是5,也就是说合速度的方向是45度,当然你可以让vx,vy为不同的值,会有不同的速度也会沿不同的方向移动,如果反向,自然设置vx,vy为负值即可。
上面的学习如果你认为很容易,那下面这段相信对你也不会有问题,刚才我们说到当设置vx,vy都相同时,它是以45度的合速度方向运动的。虽然设置不同的值可以代表不同的方向。但这种方法很不科学。我们可以动用我们的数学知识,来让物体按我们指定的特定的角度移动。这里需要复习一下我们的数学知识。
(1) 弧度:弧度=角度*PI/180;
(2) 角度:角度=弧度*180/PI;
如果以指定的角度运动。那么这时的速度累加相当于沿着半径的方向。最终目的点是到达沿着半径方向的某一点。由于是合速度,我们需要定义一个统一个合速度以方便我们将x和y 轴上的速度分解出来为vx,vy。我们定义为speed;
那么在x轴方向上的速度应为:
vx=Math.cos(radians)*speed;
在y轴上的速度应为
vy=Math.sin(radians)*speed;
代码:
speed=10;
angle=15;
radians=angle*Math.PI/180;
onEnterFrame=function(){
vx=Math.cos(radians)*speed;
vy=Math.sin(radians)*speed;
my_mc._x+=vx;
my_mc._y+=vy;
}
通过演示你已经发现小球已经沿着15度的方向移动了。这样angle相当是一个接口参数,你可以任意的对小球的方向进行控制。
//.......2. 加速度
经过上面的学习已经对速度应用有了一些了解,下面我们看一下加速度。在物理中的加速度有一个公式如:vt=vo+at 在FLASH中应用基本上与些公式类似,只是省去了一些细节如时间。细分析时间并没有省去,而是通过时间轴来代替了。这里我们加速度为ax,那么在x轴上速度一般写成vx=vx+ax,简写成vx+=ax;我们把初速度设为0;
代码:
ax=0.2;
vx=0;
onEnterframe=function(){
vx+=ax;
my_mc._x+=vx;
}
通过演示我们发现小球已沿着合速度方向加速运行,现在问题又来了,如何使我们能按指定的角度加速运行呢。这个就当一个小作业吧。看你是否理解了它的应用。你可以结合前面的例子试一下。
//..............................................
3. 重力
重力实际上就是加速度,但它有一个特殊性是只做用在y轴上,这里我们把重力定义成grav,与上面的加速度类似。
代码:
grav=0.5
vy=0;
onEnterFrame=function(){
vy+=garv;
my_mc._y+=vy;
}
////..........................................................
4. 弹性
弹性,一般是指物体接触到到某个边界,所进行的回弹,在FLASH中,我们需要做的是设置好边界,以及物体回弹的方向。那么如何确定它回弹的方向呢,我们设定一个边界,当小球超出边界时小球回弹,也就是方向改变了。以x轴为例应为:vx*=-1; 实际上你可能发现它实际上就是 vx=-vx;
代码:
//设定边界
top=0;
left=0;
right=400;
bottom=300;
vx=10;
vy=10;
onEnterFram=function(){
my_mc._x+=vx;
my_mc._y+=vy;
//下面代码检测小球是否到达边界,如果已到边界,重设小球的正确做坐,并使其回弹,
if(my_mc._x+my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-1;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left+mc_mc._width/2;
vx*=-1;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top+my_mc._height/2;
vy*=-1;
}
if(my_mc._y+my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-1;
}
}
*注意:上面代码中的my_mc._x,my_mc._y的坐标都是指my_mc的中心点,也就是说my_mc的注册点在中心,如果你在制作过程中发现与本演示不同,那一定是你的my_mc注册点没有在中心上。
弹性中的能量损失
在上面的例子,小球在回弹时我们设定当碰到边界时直接回弹,也就是vx*=-1;并没有能量的损失,但在现实生活中,小球在回弹时要有一定的能量损失,其中还要有重力加速度的影响,通过上面的例子我们可以得出结论,当回弹速度设为1时无能量损失,其中的负号只是代表方向,当小于1时会产生能量损失,也就是我们通常说的摩擦,如:vx*=-0.8;同时不要忘了在现实生活小球还会受重力加速度的影响。
代码:
top=0;
left=0;
right=400;
bottom=300;
//设定重力加速度变量garv
garv=.5;
vx = 10;
vy = 10;
onEnterFrame = function () {
//y轴方向的加速度
vy+=garv;
my_mc._x += vx;
my_mc._y += vy;
if(my_mc._x+my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-0.8;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left+my_mc._width/2;
vx*=-0.8;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top+my_mc._height/2;
vy*=-0.8;
}
if(my_mc._y+my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-0.8;
}
};
//...............................................
5.摩擦力
摩擦力的应用相对比较简单,我们需要定义一个摩擦系数,通常它的值为小于1,然后将它与速度相乘,也就是前面在弹性时所提到的能量损失。
代码:
fraction=0.95;
vx=10;
vy=10;
onEnterFrame=function(){
vx*=fraction;
vy*=fraction;
my_mc._x+=vx;
my_mc._y+=vy;
}
///....................................................................................
拖动与抛
拖动与抛实际是与上面的例子的结合应用,这里只是说明如何与上面相结合使用。在本例中我们想要在拖动小球的小球停止运动,松开或抛出时小球继续运动,在制作之前,我们先看一下基础知识:
要点:拖动我们使用方法startDrag(),同时要禁止小球运动,当拖动时要注意小球的运动速度变化,松开时,使用方法stopDrag(),同时重置速度,然后小球继续运动。
代码:
top=0;
left=0;
right=400;
bottom=300;
garv=.5;
vx = 10;
vy = 10;
onEnterFrame = function () {
//设定如果没有拖动则小球正常进行带有能量损失的弹性运动
if(!dragging){
vy+=garv;
my_mc._x += vx;
my_mc._y += vy;
if(my_mc._x+my_mc._width/2>right){
my_mc._x=right-my_mc._width/2;
vx*=-0.8;
}
if(my_mc._x-my_mc._width/2<left){
my_mc._x=left+my_mc._width/2;
vx*=-0.8;
}
if(my_mc._y-my_mc._height/2<top){
my_mc._y=top+my_mc._height/2;
vy*=-0.8;
}
if(my_mc._y+my_mc._height/2>bottom){
my_mc._y=bottom-my_mc._height/2;
vy*=-0.8;
}
//如果有拖动,则此时速度发生了变化,需要记录下最后my_mc的位置和当前my_mc的位置,两者的差为当前的速度。
}else{
vx=my_mc._x-oldx;
vy=my_mc._y-oldy;
oldx=my_mc._x;
oldy=my_mc._y;
}
};
my_mc.onPress=function(){
this.startDrag();
dragging=true;
}
my_mc.onRelease=function(){
this.stopDrag();
dragging=false;
}
//........................................................................................
7.easing缓动
简单的easing方式,需要我们选择目的地,然后以摩擦的形式达到目的点。这就是easing.如果想要更复杂的easing方式,可以参看www.robertpenner.com,当然你也可以使用现在网站各种各样的类。或是使用mm自带的transition类或是tween类。
代码:
targetx = 200;
targety = 150;
onEnterFrame = function () {
dx=targetx-my_mc._x;
dy=targety-my_mc._y;
my_mc._x+=dx*.3;
my_mc._y+=dy*.3;
};
///...................................................................................
8.Spring弹簧
spring非常类似于easing,但它的效果比easing更cool。一般的方法为定义一个目标点,计算出到它的距离,加速度为距离与摩擦系数的积,同时还需要使用摩擦。
代码:
var targetx = 200;
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
if (!dragging) {
//起始点与目标地点的距离
dx = targetx-my_mc._x;
dy = targety-my_mc._y;
//加速度
vx += dx*.3;
vy += dy*.3;
//加入摩擦
vx *= fraction;
vy *= fraction;
my_mc._x += vx;
my_mc._y += vy;
}
};
my_mc.onPress = function() {
this.startDrag();
dragging = true;
};
my_mc.onRelease=function() {
this.stopDrag();
dragging = false;
};
//.........................................................................
spring 与鼠标相连
下面我们要对spring 进行一下简单的扩展,我们可以将目标地点设为光标的坐标值,同时可以使用drawing api用画线的方式将其相连起来。
代码:
var targetx = 200;
var targety = 150;
fraction = .9;
vx = 0;
vy = 0;
onEnterFrame = function () {
dx = _xmouse-my_mc._x;
dy = _ymouse-my_mc._y;
vx += dx*.3;
vy += dy*.3;
vx *= fraction;
vy *= fraction;
my_mc._x += vx;
my_mc._y += vy;
//画线与mouse相连
clear();
lineStyle(1,0,100);
moveTo(_xmouse,_ymouse);
lineTo(my_mc._x,my_mc._y);
};
现在我们在变通一下,小球在自然界中是有重力的。加上重力看看什么效果。一个小作业,你试一下。
//.........................................................................................
Spring 链
最后我们来一个稍微难一点的,是上面例子的一个扩展,如果你对上一个例子有了一定的理解,这个对你来说是不成问题的。上面的例子是跟随着光标,如果是链的话。那么第二个小球就应跟随第一个小球,依次类推。如果这个你难做出来。相信这种类型的菜单对你来说就不成问题了。
代码:
fraction = .7;
grav=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;
onEnterFrame = function () {
clear();
lineStyle(1, 0, 100);
moveTo(_xmouse, _ymouse);
spring(my_mc, _xmouse, _ymouse);
spring(my_mc1, my_mc._x, my_mc._y);
spring(my_mc2, my_mc1._x, my_mc1._y);
};
function spring(mc, x, y) {
dx = x-mc._x;
dy = 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;
lineTo(mc._x, mc._y);
}
////...............................................................................
距离
Distance=Math.sqrt((x2-x1)*(x2-x1) + (y2-y1)*(y2-y1));