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就可以了。

时间: 2024-12-22 20:21:50

flash 缓动效果代码的相关文章

flash缓动效果

今天在做一个简单的flash动画时,发现了flash的一个比较好的特性.都怪自己很久没接触flash了,新的flash出了这么好的特性我竟然不知道. 一直以来希望flash能像3dMax一样编辑动画曲线,而不是简单的补间,没想到flash竟然实现了这个功能. 先看看面板吧,用过3dMax的朋友应该很熟悉吧? 这就是缓冲开始的地方 像不像3dmax的动画控制面板啊,注意选项--颜色?滤镜? 和photoshop的曲线差不多,alt删除一个节点,节点的调节和用钢笔差不多. 以前做缓动时都是通过act

[Flash基础理论课10] 缓动效果[Tween类]

返回"Flash基础理论课 - 目录" Tween类,在推出FlashMX时就出现了,允许您轻松地在舞台上移动.缩放和淡入淡出影片剪辑.实质是用于添加AS过渡动画,使用非常的方便. Tween类的使用: Tween类算是一个外部类,所以使用前应先导入: import mx.transitions.Tween; Tween类中easing方法的导入:用easing.*打开整个包,所有方法也都被载入了 import mx.transitions.easing.*; Tween类构造函数中各

带缓动效果返回顶部JS特效代码

返回顶部,这里可换成图片 带缓动效果的返回顶部JS特效代码 Page 1 Page 2 Page 3 Page 4 Page 5 Page 6

缓动效果

Tween类,在推出FlashMX时就出现了,允许您轻松地在舞台上移动.缩放和淡入淡出影片剪辑.实质是用于添加AS过渡动画,使用非常的方便. Tween类的使用: Tween类算是一个外部类,所以使用前应先导入: import mx.transitions.Tween; Tween类中easing方法的导入:用easing.*打开整个包,所有方法也都被载入了 import mx.transitions.easing.*; Tween类构造函数中各参数介绍 function Tween(obj,

JavaScript Tween算法及缓动效果

Flash做动画时会用到Tween类,利用它可以做很多动画效果,例如缓动.弹簧等等. 我这里要教大家的是怎么利用flash的Tween类的算法,来做js的Tween算法,并利用它做一些简单的缓动效果. 实例效果 效果说明 首先大家到这里下载flash的as脚本(建议看看这里的demo),1.0和2.0都可以(里面的算法都一样). 例如打开2.0的可以看到几个as文件,每个文件对应一个Tween效果,分别有(参考里面的说明): Linear:无缓动效果: Quadratic:二次方的缓动(t^2)

非常不错的Flash缓动广告导航_Flash教程

非常不错的Flash缓动广告导航  今天整理电脑看到这个效果,再重新练习了一遍 先看效果:新建一个flash名字随便了,大小588*350  : 1,把你要放的图片导到库里面 .2,新建一个mc名字为mc1, 把刚才的图片拖进来,上对齐,左对齐 .3,新建一个mc名字为color 用矩形工具拖个色条宽20 高350,然后再回到mc1新建一层,把color拖进来也是左对齐,上对齐 .4,新建一层在mc1上写上要显示的文字 .5,再在mc1上新建一层,加入一个20*350的按钮,实例名为btn .6

javascript中的缓动效果实现程序_javascript技巧

常见的动画有四种类型,介绍一下: linear:线性动画,即匀速 easeIn:速度从小到大,即淡入 easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出 其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子 我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值 再看一个稍复杂的: 这个有淡入效果,也就是说动画开始时,值的变化

javascript中的缓动效果实现程序

常见的动画有四种类型,介绍一下:         linear:线性动画,即匀速       easeIn:速度从小到大,即淡入   easeOut :速度从大到小,即淡出 easeInOut:开始时速度从小到大,结束时速度从大到小,即淡入淡出 其实说到缓动,就不得不提Robert Penner,他发明了N多缓动公式,举个例子   我还是解释一下吧: 设当前变化量为X,则 t / d = X / c,所以X = c * t / d,然后X + b就可以获得当前属性值   再看一个稍复杂的:  

大气flash 图片轮换效果代码

本文章提供一款大气flash 图片轮换效果,本文章只给出部份代码,文章下面提供了完整的源码下载与效果预览,如果你喜欢可以下载去用,很适合于企业站,商城等网幻灯片. <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http