正文  软件开发 > 编程综合 >

缓动效果 js开发教程

Tween类,在推出FlashMX时就出现了,允许您轻松地在舞台上移动、缩放和淡入淡出影片剪辑。实质是用于添加AS过渡动画,使用非常的方便。Tween类的使用:Tween类算是一个外...

Tween类,在推出FlashMX时就出现了,允许您轻松地在舞台上移动、缩放和淡入淡出影片剪辑。实质是用于添加AS过渡动画,使用非常的方便。

Tween类的使用:

Tween类算是一个外部类,所以使用前应先导入:

import
mx.transitions.Tween;

Tween类中easing方法的导入:用easing.*打开整个包,所有方法也都被载入了

import
mx.transitions.easing.*;

Tween类构造函数中各参数介绍

function Tween(obj, prop, func, begin, finish, duration,
useSeconds)
{

    //
代码……

}

obj(实例名) Tween 实例的目标影片剪辑对象。

prop(属性) obj的属性的字符串名称。

func(效果) 缓动效果的缓动方法。

begin(开始)  属性的开始值。

finish(结束)
属性的结束值。

duration(时间)
一个数字,指示补间动画的时间长度。

useSeconds(使用秒) 一个布尔值,如果该值为
true,则指示使用秒,如果为 false,则使用帧。
例如:
new Tween(mc, "_x",
Back.easeInOut, mc._x, 300, 4, true);

缓动效果(func参数):

Back
过渡范围外扩展动画一次,以产生从其范围外回拉的效果。

Bounce
过渡范围的弹跳效果。弹跳数与持续时间相关,持续时间越长,弹跳数越多。


Elastic
超出过渡范围的弹性效果。弹性量不受持续时间影响。

Regular
较慢的运动。加速效果、减速效果或这两种效果。

Strong 较慢的运动。此效果类似于 Regular
缓动类,但它更明显。

None
无任何减速或加速效果的运动。此过渡也称为线性过渡。

这六种缓动计算类的每一种都有三个缓动方法,下表中描述了这些缓动方法:


easeIn 在过渡的开始提供缓动效果。

easeOut 在过渡的结尾提供缓动效果。

easeInOut 在过渡的开始和结尾提供缓动效果。

easeNone 指明不使用缓动计算。只在 None
缓动类中提供。

看到这儿,是不是有点儿晕,呵呵,理论就是这样。Tween类的本质实际上就是把对象的属性从Begin(开始)变化到Finish(结束),并加以特效。没关系,下面做个实例,让理论实践相结合,注意对照上面的参数


实例1:控制小球


思路:点击鼠标后,小球向所点击位置移动并带有缓动效果;


步骤1:

   
绘制一个小球,保存为影片剪辑,放到舞台中,实例名为"ball"

步骤2:

加入AS代码(注释部分:请大家进行替换试试效果):

import
mx.transitions.Tween;

import mx.transitions.easing.*;
//导入Tween类及方法
_root.onMouseDown
= function() {

new Tween(ball, "_x",
Back.easeInOut, ball._x, _xmouse, 3, true);

new Tween(ball, "_y", Bounce.easeInOut, ball._y,
_ymouse, 3, true);

//------------------------------------------------------------------


//new Tween(ball, "_x", Strong.easeInOut,
ball._x, _xmouse, 3, true);

//new Tween(ball, "_y", Elastic.easeInOut,
ball._y, _ymouse, 3, true);

//------------------------------------------------------------------


//new Tween(ball, "_x", Elastic.easeInOut,
ball._x, _xmouse, 3, true);

//new Tween(ball, "_y", Elastic.easeInOut,
ball._y, _ymouse, 3, true);

//效果还有很多,朋友们发挥主观能动性自行开发...
...

};

//通过这个实例我们发现,即使_x和_y给予不同的缓动效果小球都可以准确地到达指定位置,只是过程不同而已。


实例2:飞入菜单


思路:1.初始化时把mc放到舞台外,这样才能出现飞入效果;


   
2.初始化时把mc的_yscale缩小,为放大效果做准备。


步骤1:
   
随便画些什么,保存为影片剪辑,放在舞台中心,实例名为"mc";

   
再绘制两个按钮在舞台中,实例名分别为"in_btn","out_btn";

步骤2:
加入AS代码(注释的new
Tween()部分请大家可替换后试试效果):

import
mx.transitions.Tween;

import mx.transitions.easing.*;

//导入Tween类及其方法

mc._x = 1000;

mc._yscale = 10;
//设置mc的初始位置和高度

in_btn.onRelease = function() {

//飞入效果

new Tween(mc, "_yscale",
Bounce.easeOut, mc._yscale, 100, 4, true);

//mc._yscale放大到100

new Tween(mc, "_x",
Back.easeOut, mc._x, Stage.width/2, 5, true);

//mc._x移动到舞台宽度的一半(即舞台中心)

//new Tween(mc, "_x", Bounce.easeOut, mc._x,
Stage.width/2, 5, true);

//new Tween(mc, "_x", Elastic.easeOut, mc._x,
Stage.width/2, 5, true);

//new Tween(mc, "_x", Regular.easeOut, mc._x,
Stage.width/2, 5, true);

//new Tween(mc, "_x", Strong.easeOut, mc._x,
Stage.width/2, 5, true);

//new Tween(mc, "_x", None.easeNone, mc._x,
Stage.width/2, 5, true);

};


out_btn.onRelease = function() {

//飞出效果

new Tween(mc, "_yscale",
Bounce.easeIn, mc._yscale, 50, 3, true);

//mc._yscale缩小到50

new Tween(mc, "_x",
Elastic.easeIn, mc._x, -1000, 5, true);

//mc._x移动到-1000(即舞台外部)

//new Tween(mc, "_x", Bounce.easeOut, mc._x,
-1000, 5, true);

//new Tween(mc, "_x", Elastic.easeOut, mc._x,
-1000, 5, true);

//new Tween(mc, "_x", Regular.easeOut, mc._x,
-1000, 5, true);

//new Tween(mc, "_x", Strong.easeOut, mc._x,
-1000, 5, true);

//new Tween(mc, "_x", None.easeNone, mc._x,
-1000, 5, true);

};


Flash充电1:new Tween()参数解析



Flash充电2:六类缓动效果的easeOut方法演示