• as3 TweenMax TweenLite方法


    as3 TweenMax TweenLite方法补充(暂停、重新播放、倒序播放)。现在来好好的学习一下:
     
    TweenLite.to(mc, 1.5, {x:100});
    

    里面的mc指所作用的对象,1.5指运动的时间,{x:100} 表示mc的x属性变化,最终停下来时x的值为100. (即mc从当前位置,经过1.5秒,匀速移动到x=100的位置)

    TweenLite.from(mc, 1.5, {x:100}) 
    

    里面的mc指所作用的对象,1.5指运动的时间, 这里是指,mc从当前位置,经过1.5秒, 从x=100的位置移动到当前mc所在的位置。“注意与上面的区别,他们恰好相反”)

    下面我们以上面的TweenLite.to() 来讲解相关属性:

    TweenLite.to() 
     TweenLite.from()
    //返回的都是TweenLite类型
    
    
    TweenLite.to(mc, 1.5, {x:100});
    //我们还可以在{}里加些其他相关的属性
    

    下面有delay属性 其表示 延迟delay时间后才发生Tween :

    1 TweenLite.to(mc, 1, {x:100, delay:2}); 
    2 //表示需要经过2秒,mc才执行发生移动

    我们还可以在{}加入alpha、 ease(缓动) onComplete(所调用的方法名)等属性:

    1 TweenLite.to(mc, 1.5, {x:100, ease:Elastic.easeOut, delay:0.5, onComplete:myFunction});
    2 function myFunction():void
    3 {
    4     trace("tween finished");
    5 }
    6 
    7 /*上面的 ease:Elastic.easeOut是缓动类的一种类型 onComplete:myFunction 表示tween执行完后就会调用myFunction方法(即执行完Tween后,紧接着就调用myFunction方法,)。*/

    TweenLite还有一方法,如:pause(), resume(), reverse(), restart()

    pause()     表示暂停 

    resume()   表示继续播放缓动

    restart()    表示重头开始播放缓动

    reverse()  表示按与原方向相反的方向缓动(例如:缓动了2秒后,调用该方法,就会经过相同的时间(2秒)按原路返回)

    下面是一个对各个属性进行验证的小例子:

    start_btn是开始按钮,即按下它才会执行缓动

    btn 按钮是对一些方法的验证 ,你可以改变里面的相关方法进行验证   如将 tween.reverse();  改成tween.resume();

     1 import com.greensock.*;
     2 import com.greensock.easing.*;
     3 var isPause:Boolean;
     4 var tween:TweenLite;
     5 btn.enabled = false;
     6 start_btn.addEventListener(MouseEvent.CLICK,begin);
     7 btn.addEventListener(MouseEvent.MOUSE_DOWN,onDown);
     8 function begin(e:MouseEvent)
     9 {
    10     btn.enabled = true;
    11     tween = TweenLite.from(mc,10,{x:300,y:300,alpha:0.5,delay:2,onComplete:completeIt});
    12 }
    13 function completeIt()
    14 {
    15 
    16     trace("缓动执行完毕,开始调用此方法");
    17     trace(tween);
    18     //TweenLite类型
    19 
    20 }
    21 
    22 function onDown(e:Event):void
    23 {
    24     if (isPause==false)
    25     {
    26         tween.pause();
    27         isPause = true;
    28     }
    29     else
    30     {
    31         tween.reverse();
    32         isPause = false;
    33     }
    34 
    35 }

    onComplete : Function – 缓动结束时执行的函数。
    onCompleteParams : Array – 给 onComplete 参数指定的函数传递参数 (可选的)

    					stageBallDowntween = TweenLite.to(nowStageDownBall,ballDownPerTime*(2-getSamePipOtherBallInfo_arr[1]),{rotation:360,x:e.target.x,y:e.target.y-stageBallHeight*getSamePipOtherBallInfo_arr[1],onComplete:completeIt,onCompleteParams:[]});
    

      

    TweenLite可选属性:overwrite

    overwrite属性来自 OverwriteManager 类
     
    其有五种模式
     
    0 : 速度最快的模式
     
    1: 适合按钮使用的模式 ,按钮发生 roll_over/roll_out 事件
     
    2 :默认模式 。除了无速度(选择0)要求,和作用对象为按钮(选择2)外,一般用默认模式。

    overwrite属性 : 默认值是 2   即 auto

    一般用法:

    1  TweenLite.to(mc, 1, {x:100, overwrite:2}); 
    2 //推荐 使用这种, 2 代表的是模式2 即AUTO模式   也是默认值
    3 
    4 // 或者
    5 
    6 TweenLite.to(mc, 1, {x:100, overwrite:true});
    //在使用模式时 ,需要初始化 即: 
    
    OverwriteManager.init(2)
     /* 里面的模式2 只是起个初始化作用,  你可以将其修改为其他的模式,但是上面的初始化必不可少,否则无效(无效则用默认模式2) 。
    模式修改是在overwrite里进行的。*/
    
    //例如:
    
    OverwriteManager.init(2)
    //初始化
    TweenLite.to(btn, 1, {x:100, overwrite:1});
    //初始化模式为2,现在修改为1 
    

     

    TweenLite和TweenMax的比较
     
    使用TweenLite,编译后文件较小,假如对文件大小有要求的话,推荐使用这种。
     使用TweenMax,编译后文件较大 ,该类,功能很多,编译后文件较大。
     
    他们的用法相似:
    1 TweenLite.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut});
    2 TweenMax.to(mc, 1.5, {x:100, y:200, onComplete:myFunction, ease:Strong.easeOut}); 
    使用 TimelineLite
     可以将其 TimelineLite看成MovieClip 
    它的作用是控制tween的运动,其当我们需要mc的运动一个接着一个
     
    例子:
    1 var myTimeline:TimelineLite = new TimelineLite();
    2 myTimeline.append( new TweenLite(mc, 1, {x:100}) );
    3 //添加进myTimeline;
    4 myTimeline.append( new TweenLite(mc, 1, {y:200}) );
    5 myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );
    上面的代码的结果是: mc首先移到x=100处,然后移动到y=200处,最后颜色发生渐变,渐变到0xFF0000
    它们的运动是一个接着一个进行。
     
    下面是一个 测试例子,
    要求一开始并没有发生tween运动,当鼠标滑上和滑下按钮menu时执行tween运动
     
    即: var myTimeline:TimelineLite = new TimelineLite({paused:true});
    这样开始时就不发生tween运动了。
    TimelineLite的属性方法和TweenLite很多一样。
     
    var tween = new TweenLite({paused:true});
    //这样开始时也是不发生tween运动
     
    下面是具体的代码:
     
     1 var myTimeline:TimelineLite = new TimelineLite({paused:true});
     2 myTimeline.append( new TweenLite(mc, 1, {x:100}) );
     3 myTimeline.append( new TweenLite(mc, 1, {y:200}) );
     4 myTimeline.append( new TweenMax(mc, 1, {tint:0xFF0000}) );
     5 
     6 menu.addEventListener(MouseEvent.ROLL_OVER, overHandler);
     7 menu.addEventListener(MouseEvent.ROLL_OUT, outHandler);
     8 
     9 function overHandler(event:MouseEvent):void
    10 {
    11     myTimeline.play();
    12 }
    13 
    14 function outHandler(event:MouseEvent):void
    15 {
    16     myTimeline.reverse();
    17 }
    除此之外,
    我们还可以在某个时刻或者某个标签插入tween运动,用到的方法是TimelineLite的insert()方法。
     我们还可用TimelineLite的addlabel() 给某个时刻插入标签。
     
    append() 的第二个参数offset表示上一个tween过后,在过offset时间执行本tween运动
     
    例子:
     1 var myTimeline:TimelineLite = new TimelineLite();
     2 
     3 //在时刻为1秒的地方插入 tween运动,即第一秒结束后才运动
     4 myTimeline.insert( new TweenLite(mc, 2, {x:100}), 1);
     5 //提前1.5秒发生tween运动;
     6 myTimeline.append( new TweenLite(mc, 1, {y:200}), -1.5);
     7 // 为4秒时刻增加标签 spin;
     8 myTimeline.addLabel("spin", 4);
     9 
    10 //在spin标签处添加tween动画;
    11 myTimeline.insert( new TweenLite(mc, 1, {rotation:"360"}), "spin");
    我们也可对多个运动同时进行运动
    myArrayOfSprites是运动对象mc的数组
     1 myTimeline.insertMultiple( TweenMax.allFrom(myArrayOfSprites, 1, {y:"-100", autoAlpha:0}) ); 
     2 
     3 TweenLite.delayedCall(2, myFunction, [myParam1, myParam2]); 
     4 /*表示经过2秒后执行myFunction()方法,[myParam1, myParam2是该方法的参数*/
     5 
     6 
     7 TweenLite.to(mc, 1, {x:"100"});
     8 //在原坐标的基础上增加100像素 注意与x:100的区别
     9 //如果传入的参数是数值,一定要转换为字符串:
    10 TweenLite.to(mc, 1, {x:String(myVariable)});
    11 
    12 
    13 TweenMax.pauseAll()
    14 TweenMax.killAll();

    转载修改于:http://blog.sina.com.cn/s/blog_8b7ca01301012d7n.html

  • 相关阅读:
    前端框架framework和库library的一点区别和记录
    DButils实现数据库表下划线转bean中驼峰格式
    layui内部使用jQuery
    Object...与Object[]使用的一点区别和记录
    SSM框架整合系列——第一步
    $.ajax的async设置true和false的区别一点笔记
    idea使用破解版mybatis plugin插件失败,idea打不开的解决方案
    ECharts在柱状图的柱子上方显示数量的方法
    Echarts使用Ajax异步获得数据的前端json格式转化问题
    Ajax的post表单,不在url后接一大串参数键值对的方法
  • 原文地址:https://www.cnblogs.com/dt1991/p/7494207.html
Copyright © 2020-2023  润新知