TweenMax 教程 & 使用(转)

    技术2022-05-13  6

    内容:  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, onUpdateListener:reportProgress, onCompleteListener:tweenFinished});   function reportProgress($e:TweenEvent):void {    trace("tween progress: " + $e.target.progress);   }   function tweenFinished($e:TweenEvent):void {    trace("tween finished!");   }  

    提示:

        - 使用自己的监听器:    var myTween:TweenMax = new TweenMax(my_mc, 2, {x:200});    myTween.addEventListener(TweenEvent.COMPLETE, myFunction);


    最新回复(0)