flash 缓动效果代码

作者：袖梨 2022-07-02

先从减速运动开始。

何谓匀速运动？何为减速运动？

匀速运动，物理上来讲，就是单位时间内物体位移的值相等。而在flash">flash里来说的话，就是每一帧里，影片剪辑的某一个属性值变化的幅度相等。拿上一次提到的代码来看：

  1. myMc._x=0;
  2. onEnterFrame=function(){
  3. myMc._x += 1;
  4. }
复制代码

可以看到，在每一帧里，影片剪辑的x轴坐标增加了1，如果你觉得他慢吞吞得很不来劲，可以把这个值改大点，比如说改成10，

  1. myMc._x=0;
  2. onEnterFrame=function(){
  3. myMc._x += 10;
  4. }
复制代码

运动速度果然快了很多，但是很抱歉，好像还是匀速的。所以，如果每帧中的数值保持不变，运动一定是匀速的。那么什么是减速运动呢？物理上来讲，就是单位时间内物体位移的值逐渐减小，最后变成零，物体就停下来了。所以，说到这里，冰雪聪明的你一定迫不及待的要举手发言了。

对了，所谓减速运动，在flash里，实现的方法就是让这个值逐渐减小，最后变成零就行了。到了这里，我们可以隆重推出我们的减速运动的公式了，看仔细了，如果你希望影片剪辑逐渐减速，到x轴坐标为500的时候停下来，那么，这样来写：

  1. myMc._x=0;
  2. onEnterFrame=function(){
  3. myMc._x += (500-myMc._x)/10;
  4. }
复制代码

看明白了吗？没看明白得让你的大脑充分转动起来，想一想(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资源。

  1. myMc._x=0;
  2. onEnterFrame=function(){
  3. myMc._x += (500-myMc._x)/10;
  4. if(Math.abs(500-myMc._x)<0.5){
  5. delete this.onEnterFrame;
  6. myMc._x=500;
  7. }
  8. }
复制代码

Math.abs是对括号里的数字取绝对值，因为500-myMc._x永远不可能达到零，所以，我们只能取一个极为接近0的数字，比如说0.5，基本上从视觉上已经看不出它的位置上差别。所以，这个时候我们把循环清除掉，并且直接赋值给myMc._x就可以了。

相关文章

精彩推荐