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]缓和，容易

Flash ActionScript3.0缓动类

类型	easeIn()方法	easeInOut()方法	easeOut()方法
Back	开始时往后运动，然后反向朝目标移动。	开始运动时是向后跟踪，再倒转方向并朝目标移动，稍微过冲目标，然后再次倒转方向，回来朝目标移动。	开始运动时是朝目标移动，稍微过冲，再倒转方向回来朝着目标。
Bounce	以较慢速度开始回弹运动，然后在执行时加快运动速度。	缓慢地开始跳动，进行加速运动，再进行减速。	以较快速度开始回弹运动，然后在执行时减慢运动速度。
Elastic	以较慢速度开始运动，然后在执行时加快运动速度。	缓慢地开始运动，进行加速运动，再进行减速。	以较快速度开始运动，然后在执行时减慢运动速度。
None	一种没有加速的持续运动。	同左	同左
Regular	以零速率开始运动，然后在执行时加快运动速度。	开始运动时速率为零，先对运动进行加速，再减速直到速率为零。	以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。
Strong	以零速率开始运动，然后在执行时加快运动速度。	开始运动时速率为零，先对运动进行加速，再减速直到速率为零。	以较快速度开始运动，然后在执行时减慢运动速度，直至速率为零。

//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, 0, fInOutishValue, duration, true);

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

}

 

 two.addEventListener(MouseEvent.CLICK,click2)

function click2(e:MouseEvent):void{

　　var  myarray2:Tween=new  Tween(two, "y", Bounce.easeOut, 0, fInOutishValue, duration, true);

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

}

 

three.addEventListener(MouseEvent.CLICK,click3)

function click3(e:MouseEvent):void{

　　var  myarray3:Tween=new  Tween(three, "y", Elastic.easeInOut, 0, fInOutishValue, duration, true);

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

}

 

four.addEventListener(MouseEvent.CLICK,click4)

function click4(e:MouseEvent):void{

　　var  myarray4:Tween=new  Tween(four, "y", Regular.easeOut, 0, fInOutishValue, duration, true);

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

}

 

five.addEventListener(MouseEvent.CLICK,click5)

function click5(e:MouseEvent):void{

　　var  myarray5:Tween=new  Tween(five, "y", Strong.easeOut, 0, fInOutishValue, duration, 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,0,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);
}
}