标题: 让运动更流畅、更优雅、更丰富——雅酷互动flash as2简易教程第3篇

作者: dnawo

日期: 2009-03-12 02:41 AM

内容: 现在大家应该都会使用AS程序让影片剪辑动起来了。但是你按照我教你的方法做来做去，一定做得很郁闷，为什么呢？别人的FLASH看起来又流畅，又优雅，又漂亮，动起来那个好看啊，可是我的FLASH为什么动起来直不楞登的，活像机器人呢？算了，算了，别郁闷了，我还是告诉你吧，虽然咱们现在已经学会了用程序使FLASH动起来，但这只是FLASH程序动画得罪最基础的皮毛而已，就像刚刚学会走路的小孩，你还指望他能跳芭蕾？要使动画能够流畅、优雅的动起来，你还得埋头苦学才成。
优秀的FLASH动画中，影片剪辑的移动为什么看起来更流畅呢？因为它更符合生活中的运动规律，说白了两个字——缓冲。想一想汽车是怎么停下来的，速度逐渐减慢，然后停下来。任何事物在改变运动状态的时候，都是逐渐加速或者逐渐减速的，所以，要想你的动画看起来好看，你必须让动画学会缓冲才行。
先从减速运动开始。
何谓匀速运动？何为减速运动？
匀速运动，物理上来讲，就是单位时间内物体位移的值相等。
而在flash里来说的话，就是每一帧里，影片剪辑的某一个属性值变化的幅度相等。拿上一次提到的代码来看：
复制内容到剪贴板程序代码myMc._x=0;
onEnterFrame=function()
{
    myMc._x += 1;
}
可以看到，在每一帧里，影片剪辑的x轴坐标增加了1，如果你觉得他慢吞吞得很不来劲，可以把这个值改大点，比如说改成10，
复制内容到剪贴板程序代码myMc._x=0;
onEnterFrame=function()
{
    myMc._x += 10;
}
运动速度果然快了很多，但是很抱歉，好像还是匀速的。
所以，如果每帧中的数值保持不变，运动一定是匀速的。
那么什么是减速运动呢？
物理上来讲，就是单位时间内物体位移的值逐渐减小，最后变成零，物体就停下来了。
所以，说到这里，冰雪聪明的你一定迫不及待的要举手发言了。
对了，所谓减速运动，在flash里，实现的方法就是让这个值逐渐减小，最后变成零就行了。
到了这里，我们可以隆重推出我们的减速运动的公式了，看仔细了
如果你希望影片剪辑逐渐减速，到x轴坐标为500的时候停下来，那么，这样来写：
复制内容到剪贴板程序代码myMc._x=0;
onEnterFrame=function()
{
    myMc._x += (500-myMc._x)/10;
}
看明白了吗？没看明白得让你的大脑充分转动起来，想一想(500-myMc._x)/10是如何越变越小的。
好了，到这儿你是不是想明白了？
什么？还没有想明白，那就看下面的说明吧，想明白了的人，下面一段可以华丽的掠过了。
(500-myMc._x)/10中，10这个数字是可以随便写的，只要是正整数就行，当然写不同的数值，缓动的效果不一样。好奇的同学可以自己试一下。
我们来把循环分解，看一下这个值是如何逐步变小的。
myMc._x的初始值是1，所以，第一次循环时，括号中的数字是500，500/10，得到50，然后把50赋给myMc._x，也就是说第一帧中，myMc向右侧移动了50个像素，同时在第二次循环开始时，变成了50，这样，括号里(500-myMc._x)的值就变成了450，450/10是45，依次计算下去，你会发现这个值逐渐减小了。所以，mc的运动速度就逐渐减慢了，直到它越来越接近目标点500，这个值就越来越小，最后无限趋近于零，运动就停下来了。
这就是缓动的减速运动原理。
用上这个东西以后，再去看看你的动画，是不是好看多了。
其实加速运动是一样的，这里就不讲了，自己琢磨一下吧。
当然，还有一个事情需要提醒一下，就是上次我们提到的，在onEnterFrame停止的时候，一定要记得清除掉循环，避免一直占用CPU资源。
复制内容到剪贴板程序代码myMc._x=0;
onEnterFrame=function()
{
    myMc._x += (500-myMc._x)/10;
    if(Math.abs(500-myMc._x)<0.5){
        delete this.onEnterFrame;
        myMc._x=500;
    }
}
Math.abs是对括号里的数字取绝对值，因为500-myMc._x永远不可能达到零，所以，我们只能取一个极为接近0的数字，比如说0.5，基本上从视觉上已经看不出它的位置上差别。所以，这个时候我们把循环清除掉，并且直接赋值给myMc._x就可以了。
这就是所谓的缓冲运动，当然在实际的flash里还有很多更复杂的运动形式，比如说钟摆式的运动，回弹运动等等，里边的有些运动方式，flash里提供一些现成的类可以方便地实现效果。关于这些缓动类的使用，我们下次再谈。

+ 查看当前日志评论 (0)

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

标题: 让运动更流畅、更优雅、更丰富——雅酷互动flash as2简易教程第3篇

你没有权限发表评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms

暂无评论

────────────

木子屋

PJBlog3 v3.2.9.518 Inside.

Processed In 0.031 ms