Flash ActionScript (10)使用Tween缓动类创建各种动画效果

Flash动画可以有很多的制作方法。其中包括补间动画，逐帧动画，遮罩动画，引导线动画，等等。组合这些动画我们可以创建出丰富多彩的动画效果。我们利用As3.0脚本还可以创建出更多的动画类型，其中Tween类包含了几种动画类型，今天我们就来介绍一下Tween缓动类。Tween类包含6种类型：Back、Bounce、Elastic、None、Regular、Strong。每种类型包含三个方法，分别是：easeIn、easeInOut和eaSEOut。其中None类型还包含一种easeNone方法。各种方法的运动类型有不同。看看下面的表格：

//语法标注解释 ease英音：[i:z]美音：[iz]缓和，容易

//bounce英音：[bauns]美音：[bauns]弹起 ,弹回

//elastic英音：[i'l?stik]美音：[?'l?st?k]灵活的 ,可伸缩的,有弹性的 ,有弹力的

//regular英音：['regjul?]美音：['r?gj?l?]规则的 ,有规律的 ;固定的 ;正常的

我利用上述方法制作了一个小实例。实例中，我创建了五个小球，每个小球使用了一种运动类型的单个方法。

import fl.transitions.Transition;

import fl.transitions.Tween;

import fl.transitions.easing.*;

var duration:Number=3;

var fInOutishValue:Number=345

?

one.addEventListener(MouseEvent.CLICK,click1)

function click1(e:MouseEvent):void{

　　var mytween1:Tween=new Tween(one,"y",Back.eaSEOut,fInOutishValue,duration,true);

　　mytext.text="Back.eaSEOut():朝目标移动，稍微过冲，再倒转方向回来朝着目标。"

}

?

?two.addEventListener(MouseEvent.CLICK,click2)

function click2(e:MouseEvent):void{

　　var? myarray2:Tween=new? Tween(two,Bounce.eaSEOut,true);

　　mytext.text="Bounce.eaSEOut() 方法以较快速度开始回弹运动，然后在执行时减慢运动速度。"

}

?

three.addEventListener(MouseEvent.CLICK,click3)

function click3(e:MouseEvent):void{

　　var? myarray3:Tween=new? Tween(three,Elastic.easeInOut,true);

　　mytext.text="Elastic.eaSEOut() 方法以较快速度开始运动，然后在执行时减慢运动速度。"

}

?

four.addEventListener(MouseEvent.CLICK,click4)

function click4(e:MouseEvent):void{

　　var? myarray4:Tween=new? Tween(four,Regular.eaSEOut,true);

　　mytext.text=" Regular.eaSEOut() 方法以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。"

}

?

five.addEventListener(MouseEvent.CLICK,click5)

function click5(e:MouseEvent):void{

　　var? myarray5:Tween=new? Tween(five,Strong.eaSEOut,true);

　　mytext.text="Strong.eaSEOut() 方法以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。"

}

　　说到补间，很多人都会想到在时间轴里定义两个关键帧，然后创建一个补间，其实AS也可以完成等效的工作，而且能完成的更好。

　　要用程序创建补间，有两种方法，一种是通过setInterval函数，定时移动mc，可以达到效果，但比较麻烦。第二种就是今天要推荐的通过Tween类来创建补间动画。

　　为什么Tween比setInterval方便呢，首先代码量少，看着舒服，其次，Tween类可以使用一些比较有名的缓动类，还有，Tween类可以广播和侦听事件，这三点就足以让我们选择Tween而不是setInterval。

　　先来说一下Tween类的用法

　　要用Tween类，首先要导入Tween类

import mx.transtions.Tween;

　　Tween类的语法是

var twMove:Tween=new Tween(mClip,"_x",null,550,10,true);

　　来解释一下：

mClip:显示对象——对要显示对象的引用
_x:要补间的属性
缓动函数：对一个缓动函数的引用，这里是null，就是不引用
0——补间属性的开始值
550——补间属性的结束值
10——持续时间
使用秒——true 使用，false不使用

　　由于Tween类广播事件，因此可以对Tween类建立侦听器，具体Tween类的方法，请查看帮助。

　　下面是一个实例，请事先做好链接标识符为“ball”的MC，拷贝以下代码到第一帧。

import mx.transitions.Tween; import mx.transitions.easing.*; var aClass=[Back,Bounce,Elastic,Regular,Strong]; var aEasingMethod:Array=new Array(); //在aEasingMethod中放入每个缓动方法 for(i=0; i < aClass.length; i++){ aEasingMethod.push(aClass[i].easeIn); aEasingMethod.push(aClass[i].eaSEOut); aEasingMethod.push(aClass[i].easeInOut); } //定义初始变量 var nX=10; var Y=20; var oClips:Object=new Object(); //建立侦听器 var tListener:Object=new Object(); tListener.onMotionFinished=function(twObject:Tween){ //缓动结束时按原路径返回 twObject.yoyo(); } for(i=0; i < aEasingMethod.length; i++){ depth=this.getNextHighestDepth(); mClip=this.attachMovie("ball","ball"+i,depth,{_x:nX,_y:Y}); //设置x坐标 nX+=mClip._width+10; //将一个缓动方法添加到oClips对象 oClips[mClip._name]=aEasingMethod[i]; //当用户点击时开始_y属性的补间 mClip.onPress=function(){ var twMove:Tween = new Tween(this,"_y",oClips[this._name],20,400,4,true); //添加侦听器 twMove.addListener(tListener); } }