分享
 
 
 

Flash中的物理运动动画编程

王朝other·作者佚名  2008-05-19
窄屏简体版  字體: |||超大  

1.速度

物体的运动都是沿着一定的方向,以恒定或是加速度的方式的运动的。在FALSH中要使物体以一个恒定的速度运动,就需要我们在每一帧不断的累加恒定的速度。这里面我们使用一种帧的循环的方式,来使物体不断的累加恒定的速度,以达到目的地。对于帧的循环方式大致上有三种,一种是使用代码onEnterFrame,一种是使用setInterval,另一种就是使用二到三帧来达到循环,如果你对这三种方式不太熟,请查看帮助来学习。

在x轴方向的速度我们定义为vx,方向是向右,如果向左只要设为负值就可以。

例如:

代码:

vx=5;

onEnterFrame=function(){

my_mc._x+=vx; //你也可以写成 my_mc._x=my_mc._x+vx;

}

演示:

我们发现MC以恒定为5的速度向右移动,如果想要它向左移,只要将vx设为负值即可。

通过上面的代码我们可以变通一下,如果想使小球上下移动,可以设置y轴上移动。代码如下:

vy=5;

onEnterFrame=function(){

my_mc._y+=vy; //你也可以写成 my_mc._y=my_mc._y+vy;

}

这里就不再做演示了。你可以自已试一下,看看你是否理解了。

下面,我们再变通一下,在物理中有一个概念叫合速度,也就是x轴和y轴方向上的合速度。下面我们就来看一下,你可能已经知道了我在说什么。下面来看一下代码:最好你能在看下面代码之前自已写出来。

代码:

vx=5;

vy=5;

onEnterFrame=function(){

my_mc._x+=vx;

my_mc._y+=vy;

}

演示:

演示发现它已经沿着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;

}

演示:

那么同样道理,我们需要变通一下,另外个人的一点小观点,要善于提出问题,并努力想办法自已去解决,有助于你快速的学习进步。我们在y轴也加上加速度。

代码:

ax=0.2;

ay=0.1;

vx=0;

vy=0;

onEnterFrame=function(){

vx+=ax;

vy+=ay;

my_mc._x+=vx;

my_mc._y+=vy;

}

演示:

通过演示我们发现小球已沿着合速度方向加速运行,现在问题又来了,如何使我们能按指定的角度加速运行呢。这个就当一个小作业吧。看你是否理解了它的应用。你可以结合前面的例子试一下。

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;

}

6.拖动与抛

拖动与抛实际是与上面的例子的结合应用,这里只是说明如何与上面相结合使用。在本例中我们想要在拖动小球的小球停止运动,松开或抛出时小球继续运动,在制作之前,我们先看一下基础知识:

要点:拖动我们使用方法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);

}

演示:

总结:上面的教程看起来都是一些简单的东西,但它确确实实是一些好的框架,你可无限的发挥你的想象和创意,只要在这个框架之中添加一些元素或是代码。写这篇教程的目的主要是针对初级和中级的用户。目的是使大家意识到其实许多表面看起来复杂的东西,实际上都隐藏着相对复杂的简单,前提条件是你的思路一定要清晰。最后。仍要引用keith peters话。不要直接下载源文件或是直接粘贴代码。最好的方式是理解。才能发挥自如。

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有