TweenMax 教程 & 使用(转)

TweenMax 教程 & 使用(转)内容 TweenMax 继承 TweenLite 轻量 快速并增加了新的功能 比如 pause resume timeScale eventlistene reverse restart setDestinat

大家好,欢迎来到IT知识分享网。

     性能数据: http://blog.greensock.com/tweening-speed-test/
   
  – 诸多特性- 除了处理对象数字属性(x ,y )外,还能补间动画滤镜效果, 
    颜色, 声音, 色彩, 帧, 饱和度, 对比度, 色调, 色系, 亮度, 贝塞尔,


线条转换
贝塞尔曲线,
pause/resume, reverse(), restart(), 环绕值, 定点播放,最近旋转, 还有更多. 
    重写管理器是一个重要的新的亮点. 用于处理同一对象动画重叠时的效果.
   
  – 可扩展性- 参考 TweenLite.as
   
  – 可管理性 – 




    
  – 便于使用 – 
  
  – 更新- 
  
  – AS2 and AS3 – both.



 

 2) $duration : Number – 持续时间
 3) $vars : Object – 参数对象

 示例:

渲染 tweenmyClip  的 透明度 到 0.5 在 1秒内.
  TweenMax.to(myClip, 1, {alpha:0.5})

 delay : Number – 延时渲染

 ease : Function – 缓动效果       

 easeParams : Array – 上面的参数

 onStart : Function – 开始时调用

 onStartParams : Array – 参数

 onUpdate : Function – 更新时调用

 onUpdateParams : Array – 参数
 onComplete : Function – 完成时调用

 onCompleteParams : Array – 参数

 persist : Boolean – 持久

 renderOnStart : Boolean – 渲染时机 ture 等待延时 false 不等待

 overwrite : int – 重叠渲染方式:
       – 0 (NONE): 
        
     – 1 (ALL): 
         
     – 2 (AUTO): 




         
     – 3 (CONCURRENT): 

            onStartListener : Function – 开始事件.

            监听它
            tweenMaxInstance.addEventListener(TweenEvent.START, myFunction);
 
 onUpdateListener : Function – 更新处理器


               
 onCompleteListener : Function – 完成处理器

    tweenMaxInstance.addEventListener(TweenEvent.COMPLETE, myFunction);
               
 yoyo : Number – 渲染完成后倒放.  值为 0 时,不会停.        
 loop : Number – 重复. 值为 0 时,不会停.
        
 timeScale : Number – 渲染速度 1 = 正常速度 , 0.5 = 一半的速度, 2 = 2倍速度




    有一个全局的静态属性 TweenMax.globalTimeScale 影响所有的 TweenMax 和TweenFilterLite 渲染动画(但不影响 TweenLite)
 
 startAt : Object – 开始参数,用于渲染开始位置.

   比如:

    如果你的影片当前位置为 100,你想渲染为 位置 0 到 500. 

       TweenMax.to(mc, 2, {x:500, startAt:{x:0}})

      
   removeTint : Boolean – 为真移除色彩   

        示例:

        设置控制点 x,y 坐标为 250,50.使你的 my_mc 在 0,0 坐标: 

         TweenMax.to(my_mc, 3, {x:500, y:0, bezier:[{x:250, y:50}]});
       
   bezierThrough : Array – 控制点数组方式.

         TweenMax.to(mc_mc, 3, {x:500, y:0, bezier:[{x:250, y:50},{x:250, y:100},{x:250, y:200}]});
        
   orientToBezier : Array (or Boolean) – 带方向的贝塞尔曲线 

       TweenMax 需要4个参数:
        1) 位置属性1 (“x”)
        2) 位置属性2 (“y”)
        3) 旋转属性property (“rotation”)
        4) 度数(可选项- 确定方向)
        属性类型 数组.
        属性可以无限嵌套. 如果参数只传 true ,则默认为: [[“x”, “y”, “rotation”, 0]].
       提示: 不要忘记外层的括号,它代表参数的容器.






          
   roundProps : Array – 渲染?: TweenMax.to(mc, 2, {x:300, y:200, alpha:0.5, roundProps:[“x”,”y”]});
          
   blurFilter : Object – 模糊滤镜


         
   glowFilter : Object – 发光滤镜

                  
   colorMatrixFilter : Object – 颜色滤镜:
           colorize, amount, contrast, brightness, saturation, hue, threshold, relative, matrix
          
   dropShadowFilter : Object – 阴影滤镜:
          alpha, angle, blurX, blurY, color, distance, strength, quality
         
   bevelFilter : Object – 倾斜滤镜:
        angle, blurX, blurY, distance, highlightAlpha, highlightColor, shadowAlpha, shadowColor, strength, quality
      
 
关键属性:
 – progress : Number 进度 0 没有 0.5 一半 1 完成
 – timeScale : Number 动画速度












 – paused : Boolean 暂停
 – reversed : Boolean 倒放
 
关键方法:
 – TweenMax.to(target:Object, duration:Number, vars:Object):TweenMax
 – TweenMax.from(target:Object, duration:Number, vars:Object):TweenMax
 – TweenMax.getTweensOf(target:Object):Array
 – TweenMax.isTweening(target:Object):Boolean
 – TweenMax.getAllTweens():Array
 – TweenMax.killAllTweens(complete:Boolean):void
 – TweenMax.killAllDelayedCalls(complete:Boolean):void
 – TweenMax.pauseAll(tweens:Boolean, delayedCalls:Boolean):void
 – TweenMax.resumeAll(tweens:Boolean, delayedCalls:Boolean):void
 – TweenMax.delayedCall(delay:Number, function:Function, params:Array, persist:Boolean):TweenMax
 – TweenMax.setGlobalTimeScale(scale:Number):void
 – addEventListener(type:String, listener:Function, useCapture:Boolean, priority:int, useWeakReference:Boolean):void
 – removeEventListener(type:String, listener:Function):void
 – pause():void
 – resume():void
 – restart(includeDelay:Boolean):void
 – reverse(adjustStart:Boolean, forcePlay:Boolean):void
 – setDestination(property:String, value:*, adjustStartValues:Boolean):void
 – invalidate(adjustStartValues:Boolean):void
 – killProperties(names:Array):void
 
 
必看的例子:
 
 To tween the clip_mc MovieClip over 5 seconds, changing the alpha to 0.5, the x to 120 using the Back.easeOut
 easing function, delay starting the whole tween by 2 seconds, and then call a function named “onFinishTween” when
 it has completed and pass in a few parameters to that function (a value of 5 and a reference to the clip_mc),
 you’d do so like:
  
  import gs.*;
  import gs.easing.*;
  TweenMax.to(clip_mc, 5, {alpha:0.5, x:120, ease:Back.easeOut, delay:2, onComplete:onFinishTween, onCompleteParams:[5, clip_mc]});
  function onFinishTween(argument1:Number, argument2:MovieClip):void {

   trace(“The tween has finished! argument1 = ” + argument1 + “, and argument2 = ” + argument2);
  }
 
 If you have a MovieClip on the stage that is already in it’s end position and you just want to animate it into
 place over 5 seconds (drop it into place by changing its y property to 100 pixels higher on the screen and
 dropping it from there), you could:
  
  import gs.*;
  import gs.easing.*;
  TweenMax.from(clip_mc, 5, {y:”-100″, ease:Elastic.easeOut});
  
 To set up an onUpdate listener (not callback) that traces the “progress” property of a tween, and another listener
 that gets called when the tween completes, you could do:
 
  import gs.*;
  import gs.events.TweenEvent;
  
  TweenMax.to(clip_mc, 2, {x:200, onUpdateListener:reportProgress, onCompleteListener:tweenFinished});
  function reportProgress($e:TweenEvent):void {

   trace(“tween progress: ” + $e.target.progress);
  }
  function tweenFinished($e:TweenEvent):void {

   trace(“tween finished!”);
  }
 




























































提示:

免责声明:本站所有文章内容,图片,视频等均是来源于用户投稿和互联网及文摘转载整编而成,不代表本站观点,不承担相关法律责任。其著作权各归其原作者或其出版社所有。如发现本站有涉嫌抄袭侵权/违法违规的内容,侵犯到您的权益,请在线联系站长,一经查实,本站将立刻删除。 本文来自网络,若有侵权,请联系删除,如若转载,请注明出处:https://haidsoft.com/131489.html

(0)
上一篇 2025-08-07 18:10
下一篇 2025-08-07 18:20

相关推荐

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注微信