打印

[AS1&2] ★Tween类应用详解

★最近做一个项目需要用到Tween类,下面就把我做的实验和大家分享一下。

★Tween类优点:
1,可以很轻易的做出各种运动效果
2,可以更灵活的监控运动过程
3,可以选择使用秒还是帧循环
4,可以在运动结束后自己释放资源

★Tween类帮助文件:→F1打开帮助→全部书籍→组件语言参考→Tween类
★tween类相关信息:http://search.blueidea.com/?tr=b ... 4%b8%93%e6%a0%8f%27

★查看演示:http://www.huoshan.org/swf/boKe/tween/tween.html
(鼠标点击哪里,小球就会向那里运动)
★下载源文件:http://www.huoshan.org/swf/boKe/tween/tween.rar

★说明:

→tween类基本语法:
Tween( obj:Object, prop:String, func:Function, begin:Number, finish:Number, duration:Number, useSeconds:Boolean )
obj,Tween 实例所面对的影片剪辑对象。
prop,要用值补间的 obj 中属性的字符串名称。
func,计算补间对象属性值的缓动效果的缓动方法。请参见关于缓动类和方法。
begin,一个指示 prop(要补间的目标对象属性)的开始值的数字。
finish,一个指示 prop(要补间的目标对象属性)的结束值的数字。
duration,一个数字,指示补间动画的时间长度。如果省略,duration 会默认设置成无穷大。
useSeconds,一个布尔值,如果相对于 duration 参数中指定的值为 true,则表示使用秒;如果为 false,则表示使用帧。


→可以和Tween类配合使用的缓动类一共有6个:
Back:在过渡范围外的一端或两端扩展动画一次,以产生从其范围外回拉的效果。
Bounce:在过渡范围的一端或两端内添加弹跳效果。弹跳数与持续时间相关,持续时间越长,弹跳数越多。
Elastic:添加一端或两端超出过渡范围的弹性效果。弹性量不受持续时间影响。
Regular:在一端或两端添加较慢的运动。此功能使您能够添加加速效果、减速效果或这两种效果。
Strong:在一端或两端添加较慢的运动。此效果类似于 Regular 缓动类,但它更明显。
None:添加从开始到结尾无任何减速或加速效果的相同的运动。此过渡也称为线性过渡。

→每个缓动类又都有三种方法:
easeIn:在过渡的开始提供缓动效果。
easeOut:在过渡的结尾提供缓动效果。
easeInOut:在过渡的开始和结尾提供缓动效果。
easeNone:指明不使用缓动计算。只在 None 缓动类中提供。

→在三个方法中,我的源文件里只测试了easeInOut,其他的效果,如果你感兴趣,可以自己测试。

★火山提示,我们可以通过设置X和Y的运动时间,或者几种缓动综合使用,来做出很多复杂的运动效果,有兴趣的朋友不妨发挥一下自己的想象力。

★寂寞火山:http://www.huoshan.org/boKe/boKe.html#id=113

★测试代码:
复制内容到剪贴板
代码:
//导入Tween类
import mx.transitions.Tween;
//导入缓动类
import mx.transitions.easing.*;
//初始化当前运动形式为“匀速运动”
var yunDongXingShi = None.easeNone;
//运动函数
_root.onMouseDown = function() {
    //获得原始X,Y坐标
    var yuanX = yuan_mc._x;
    var yuanY = yuan_mc._y;
    //获得鼠标X,Y坐标
    var mouseX = _root._xmouse;
    var mouseY = _root._ymouse;
    //运动
    var tweenX = new Tween(yuan_mc, "_x", yunDongXingShi, yuanX, mouseX, 2, true);
    var tweenY = new Tween(yuan_mc, "_y", yunDongXingShi, yuanY, mouseY, 2, true);
    //监测运动过程
    trace("===========================");
    tweenY.onMotionChanged = function() {
        trace("X坐标:"+int(tweenX.position)+" | Y坐标:"+int(tweenY.position));
    };
    tweenY.onMotionFinished = function() {
        trace("★运动结束");
    };
};
//各种运动形式测试
//每种运动方式都会有easeIn,easeOut和easeInOut三种形式
//easeIn[在运动开始产生效果],easeOut[在运动结尾产生效果],easeInOut[在运动开始和结尾都产生效果]
//我只测试easeInOut的情况,大家如果感兴趣,可以自己测试一下其它效果
yunSuYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→匀速运动";
    yunDongXingShi = None.easeNone;
};
laHuiYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→拉回运动";
    yunDongXingShi = Back.easeInOut;
};
tanTiaoYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→弹跳运动";
    yunDongXingShi = Bounce.easeInOut;
};
tanXingYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→弹性运动";
    yunDongXingShi = Elastic.easeInOut;
};
huanChongYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→缓冲运动";
    yunDongXingShi = Regular.easeInOut;
};
qiangLieHuanChongYunDong_btn.onRelease = function() {
    wenBen_txt.text = "运动形式→强烈缓冲运动";
    yunDongXingShi = Strong.easeInOut;
};
[ 本帖最后由 jimohuoshan 于 2007-7-27 16:57 编辑 ]
我也来贴一段收藏的此类代码,可以直接引用 
复制内容到剪贴板
代码:
import mx.transitions.*;
import mx.transitions.easing.*;
ball_mc.onRelease = function() {
    myBlind(ball_mc);
};
function mytween(mc:MovieClip) {
    new Tween(mc, "_x", Elastic.easeInOut, 100, 300, 3, true);
}
function myBlind(mc){
        TransitionManager.start(mc, {type:Blinds, direction:Transition.IN, duration:2, easing:None.easeNone, numStrips:15, dimension:1});
}
//direction后面的参数可以是IN或者是OUT,其实它的意义从字面上也可以看出,是出和入的意思,duration是该效果持续的时间,numStrip是条的多少,dimension只有俩个参数0和1分别表示横和竖的意思,easing 后面的参数大家可以在easing的包里找到,总共有六个Back,Bounce,Elastic,Strong,None,Regular,这几个大家可以查字典就可以知道它的意思,其实你看了它的效果也可以猜出来,这六个参数又可以有easeIn,easeOUT,easeINOUT,easeNone几个参数它的意思也可以在字面里可以看出,就是在进场时,出场时,进出场时显示这些效果
function myFade(mc){
        TransitionManager.start(mc, {type:Fade, direction:Transition.IN, duration:3, easing:None.easeNone});
}
function myFly(mc){
        TransitionManager.start(mc, {type:Fly, direction:Transition.IN, duration:3, easing:Elastic.easeOut, startPoint:2});
}
//startPoint后面的参数大家可以换10以内不同的数字,图片将以不同的位置飞入场景
function myEris(mc){
        TransitionManager.start(mc, {type:Iris, direction:Transition.IN, duration:2, easing:Strong.easeIn, startPoint:5, shape:Iris.CIRCLE});
}
function myPhoto(mc){
        TransitionManager.start (mc, {type:Photo, direction:Transition.IN, duration:1, easing:None.easeNone});
}
function myPixelDissolove(mc){
        TransitionManager.start(mc, {type:PixelDissolve, direction:Transition.IN, duration:2, easing:None.easeNone, xSections:20, ySections:20});
}
//xSections和ySections后面的参数分别表示x方向和y方向分割的小方块
function myRotate(mc){
        TransitionManager.start(mc, {type:Rotate, direction:Transition.IN, duration:3, easing:Strong.easeInOut, ccw:false, degrees:720});
}
//ccw后面的参数true和false表示顺时针和逆时针
function mySqueeze(mc){
        TransitionManager.start(mc, {type:Squeeze, direction:Transition.IN, duration:2, easing:Elastic.easeOut, dimension:0});
        
}
//dimension的参数也是横着还是竖着挤压
function myWipe(mc){
        TransitionManager.start(mc, {type:Wipe, direction:Transition.IN, duration:2, easing:None.easeNone, startPoint:1});
}
function myZoom(mc){
        TransitionManager.start(mc, {type:Zoom, direction:Transition.IN, duration:1, easing:Elastic.easeOut});
}
本帖最近评分记录
终极讨厌    我的博客
fuse也不错,gotoAndlearn曾经介绍过
学习~~
me.
真棒!学习了

TOP

方便一位坛友查看,顶起来!

TOP

个人学习tween作品 供参考

去年暑假写的fla
如果有什么不规范的地方也请多多包涵
当时才刚学flash不久
呵呵
大量运用了
Tween 类的方法             yoyo rewind resume
Tween 类的事件处理函数(所有)

[ 本帖最后由 daozi2 于 2007-8-6 23:18 编辑 ]
附件: 您所在的用户组无法下载或查看附件,您需要注册/登录后才能查看!

TOP