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