TweenMax 教程 & 使用

最新推荐文章于 2024-05-06 15:55:50 发布

lili2lili

最新推荐文章于 2024-05-06 15:55:50 发布

阅读量2.9k

点赞数

分类专栏： flash/actionScript3.0 flex AIR 文章标签： tweenMax 缓动

flash/actionScript3.0 同时被 3 个专栏收录

7 篇文章 0 订阅

订阅专栏

AIR

5 篇文章 0 订阅

订阅专栏

flex

4 篇文章 0 订阅

订阅专栏

内容:
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!");
  }