flash 缓动效果实现代码
你这做了些啥啊,费半天劲搞出来的效果也太没水准了吧,给俺做个回弹的效果让洒家欣赏欣赏。虽然你心里直打鼓,但是看见路人甲同学真诚的眼神,还是豪情万丈的上路了。哎,书到用时方恨少啊,谁让俺数学没学好呢,愣是用了九牛二虎之力,也没把这效果做出来。
所以,这时候你就需要……
对了,专门为懒人准备的缓动类。
下面我们来看一下如何利用这个好东西吧。
说到类,有编程基础的人,首先想到的就是面向对象,没有编程基础的人,肯定一头雾水。因为本教程主要面对后者,所以先打一下气,其实,类这东西,虽然这次咱们是第一次隆重提到,但,你实际是一直在跟类打交道。不过你不知道而已。即使现在,您也不需要先了解什么是类,本节的任务就是告诉你怎么使用就行了。
在flash as2.0里边,与缓动相关的有两个类,一个叫tween类,一个叫easing类。有了这两个东西,你就可以作出让路人甲佩服的动画了。
使用这两个类之前,我们必须把它加载进来,在程序的第一行写下这两句话:
代码如下 | 复制代码 |
//导入Tween类 import mx.transitions.Tween; //导入easing类 import mx.transitions.easing.*; |
这样你的程序运行的时候,这两个类就被加载进来。
import 是导入类的意思。
而后面这段mx.transitions.则是这个类存放的路径。告诉flash到哪里可以找到这两个类,因为他们是随flash一起安装到你的电脑中的,所以,这个路径是固定的。
当然,你也可以不写这两句话,但是我建议你写,因为不写的话,你每次提到他们的时候,就必须把他们前面的那一串路经写上。
比如下面这样:
代码如下 | 复制代码 |
someTweenID=new mx.transitions.Tween(……) |
但是有了这两句话,你就简单了
代码如下 | 复制代码 |
someTweenID= new Tween(……) |
这就像你跟你mm聊天,提到路人甲,你mm肯定很困惑的问,是哪个路人甲啊?所以你必须说,是那个我看着超级不爽的路人甲。但是如果你一开始就告诉MM,我现在想和你聊一下那个让我不爽的路人甲,以后每次提到他的时候,就不用那么麻烦了,直接叫他小甲就行了。
好了,废话又多了。现在咱们先来看看第一个类怎么使用。
代码如下 | 复制代码 |
someTweenID = new Tween(object, property,function,begin,end,duration,useSeconds) |
先解释一下里边一些参数的意义。
object:是指tween的对象,也就是目标。
property:字符串,也就是说你在用的时候,要把他们用引号引起来,这个是指你要应用效果的属性,比如“_x”、“_y”等。
function:easing缓动类型。(看不懂待会解释)
begin:数值,对象的初始值,也就是缓动一开始的值。
end:数值,缓动结束的值。
duration:缓动时间。
useSeconds:是一个布尔值,决定是用秒还是用帧数表示缓动时间。true表示使用秒,false用帧数。
看到这里你就知道,tween类主要就是控制操作谁、控制什么、多长时间的问题。
至于以何种方式缓动,则是另外一个类的工作:easing
下面我们把easing类拖出来示众。
Back:在一个或两个结束点过渡范围之外的扩展动画,类似于溢出效果
Bounce:在一个或两个结束点过渡范围内加入回弹效果,回弹的多少取决于运动过程的时间,长的时间回弹的次数就相对多
Elastic:发生在一个或两个结束点过渡范围外的弹性效果,弹性的力度不熟运动过程时间的影响
Reguler:在一个或两个结束点上加入减速效果,这个特性可以帮你做出加速后减速的效果
Strong:在一个或两个结束点上加入减速效果,这个效果类似于regular,不同的在于比较明显
None:在开始点到结束点加入匀速运动,没有效果。
如果你看不明白上面的这段说明,也不要着急,继续往下看。
以上提到的是六种效果,而这六种效果,又包含三种过渡方式
easeIn:在过渡的开始产生效果,就是说运动一开始出现这种效果。
easeOut:在过渡的结束产生效果,运动要结束的时候出现这种效果。
easeInOut:在开始和结束均产生效果。
好了,说半天都没用,咱们还是上场试一下吧。如果前面的你都看不懂,上场试一下你就明白了。
在库中建立一个影片剪辑。然后在场景中把它加载进来。
代码如下 | 复制代码 |
this.attachMovie("myMc", "myMc", this.getNextHighestDepth(), {_x:20, _y:100}); |
看不懂这句话的,回去看本教程第一篇。
然后我们使用tween类来做缓动效果
代码如下 | 复制代码 |
myBall = new Tween(myMc, "_x", Elastic.easeOut, 0, 300, 3, true); |
现在我们在解释一下上面这段代码,myMc不用说了,因为你是想让myMc产生缓动效果,所以,这个地方是myMc,_x,通过改变x轴的属性值,来实现缓动的效果,当然,出来_x周以外,咱们以前提到的那些影片剪辑的属性,都可以拿来用,你有时间的话,就分别把它们拎出来试一下吧。Elastic.easeOut,这个地方看到了吧?用的就是我们刚才提到的easing类, Elastic缓动效果,easeOut过渡方式,他们两个和起来的意思,就是让myMc在运动结束时产生回弹效果。20,影片剪辑从20开始运动,300,影片剪辑最后停在300的位置上,2,时间是2,true,表示计算时间的单位是秒。
我相信不用我说,你已经测试了我刚才这段代码。现在你可以把咱们刚才提到的各类效果都试一下,就明白它们大概是什么感觉了。
到这儿大家可以看到,这两个类实在是懒得很贴心,首先,它在类中已经清除了循环,所以,你再也不用担心循环清除的问题了。其次,如果你做完了一个回弹效果,可爱的客户看到了以后,却说,这个效果看得我头晕,能给我换一个缓和点的吗?这时候你只需要把Elastic改成Strong或Reguler,另外一种效果就出来了。剩下的时间,你就可以喝喝茶,到雅酷看看教程什么的,实在是居家旅行、泡妞偷懒之必备工具。
先别忙着兴奋,接下来,我们再说两个关于缓动类的很有用的东西,第一个是onMotionFinished,这个告诉程序,如果缓动结束以后,应该做什么。如果你不知道这个函数,但是想做影片剪辑缓动结束以后,弹出提示告诉你结束了,好像是很麻烦的一件事情,至少到目前为止,你的知识面还不足以让你做出来。但是有了onMotionFinished,一切都变得很简单了。
接着上面的代码,继续写:
代码如下 | 复制代码 |
myBall.onMotionFinished=function(){ trace("缓动结束了!"); } |
看一看什么效果。对了,这里顺带介绍一下trace的作用,trace的作用就是在测试的时候,在输出面板输出()内的内容,你刚才已经看到了它的作用,以后我们还会经常用它来测试我们的程序。
除了onMotionFinished,还有一个方法,可以使你的运动接着向另外一个方向运行,这个方法叫做continueTo();它里边有两个参数,第一个参数是下一个目标点,第二个参数是运行时间,相当于tween里边的finish,duration,我们还是来现场试一下,就明白了。
把上面的代码改成
代码如下 | 复制代码 |
myBall.onMotionFinished=function(){ myBall.continueTo(400, 2); } |
补充:flash教程,Action