TweenMax 教程 & 使用


内容:

 TweenMax 继承 TweenLite ， 轻量，快速并增加了新的功能：比如 pause/resume, timeScale, event listeners, reverse(), restart(), setDestination(), yoyo, loop,

 rounding, 并且能够使用 progress 属性 跳到动画的任何位置.
默认比 TweenLite 激活更多的插件, 因此它功能齐全，它比 TweenLite 能做的更多. 如果你想整合其它动画引擎，可以考虑使用 TweenMax:

 

  - SPEED - 目前没有比它快的.   

     性能数据: http://blog.greensock.com/tweening-speed-test/
   

  - 诸多特性- 除了处理对象 数字属性(x ,y )外,还能补间动画滤镜效果, 

    颜色, 声音, 色彩, 帧, 饱和度, 对比度, 色调, 色系, 亮度, 贝塞尔,

线条转换贝塞尔曲线,
pause/resume, reverse(), restart(), 环绕值, 定点播放,最近旋转, 还有更多. 

    重写管理器是一个重要的新的亮点. 用于处理同一对象动画重叠时的效果.

   

  - 可扩展性- 参考 TweenLite.as

   

  - 可管理性 - 
    

  - 便于使用 - 
  

  - 更新- 

  

  - AS2 and AS3 - both.
 
参数:

 1) $target : Object - 渲染目标

 2) $duration : Number - 持续时间

 3) $vars : Object - 参数对象

 示例:

渲染 tweenmyClip  的 透明度 到 0.5 在 1秒内.

  TweenMax.to(myClip, 1, {alpha:0.5})

$vars object 属性(不需要插件):

 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}})

插件:

  插件信息: http://blog.greensock.com/plugins/
     下面插件在TweenMax中默认是激活的,如果您没有用到其中的插件,你可以在 TweenMax 类的构造函数中注释掉相应的插件激活行. 

   autoAlpha : Number - 透明度渲染.

        

   visible : Boolean - 显示隐藏渲染.

  

   volume : Number - 声音渲染

  

   tint : Number - 颜色渲染

      

   removeTint : Boolean - 为真 移除色彩   

   frame : Number - 渲染特定的帧

  

   bezier : Array - 贝塞尔曲线       

        示例:

        设置控制点 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]].

       提示: 不要忘记外层的括号,它代表参数的容器.

   hexColors : Object - 颜色RGB 

    

   shortRotation : Number - 最近旋转

          

   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, onUpd
98f4
ateListener:reportProgress, onCompleteListener:tweenFinished});

  function reportProgress($e:TweenEvent):void {

   trace("tween progress: " + $e.target.progress);

  }

  function tweenFinished($e:TweenEvent):void {

   trace("tween finished!");

  }