内容:
TweenGroup: 用于管理 TweenLite/TweenMax 补间动画.
特性:
- pause(), resume(), reverse(), or restart() 在同一个组
- TweenGroup 行为类似于 Array,并且它是一个动态类. 你可以进行 push(), splice(), unshift(), pop(),slice(), shift(), 循环遍历, 通过下标访问.
新建
myGroup[2] = new TweenLite(mc, 1, {x:300})
自动时间渲染管理 align 和交错 stagger
- 对齐渲染调整
- myGroup.align = TweenGroup.ALIGN_SEQUENCE; //一个接一个
- myGroup.align = TweenGroup.ALIGN_START; //同时开始,最大延时
- myGroup.align = TweenGroup.ALIGN_END; //同时结束
- myGroup.align = TweenGroup.ALIGN_INIT; //开始于延时
- myGroup.align = TweenGroup.ALIGN_NONE; //随便
- 交错并且对齐调整渲染
若交错为 0.5,且对齐为 ALIGN_START,组中第二个将在第一个 0.5 秒后开始.然后第三个. 若对齐调整为 ALIGN_SEQUENCE, 一个完成后 0.5秒然后第二个.
- 精准控制.
跳到 0.5:
myGroup.progress = 0.5 (进度)
你可以快进或快退
- 组渲染完成处理 onComplete 属性, 传递参数 onCompleteParams 属性. 组渲染完成时分发一个完成事件,类型为Event.COMPLETE ,因些可以侦听.
- 循环与来回播放 myGroup.yoyo = 2; 来回
myGroup.loop =2; 重复
- 约 4KB
它非常用实用价值,一旦了解它,你的生活将离不开它!
必须了解的方法:
- pause():void
- resume():void
- restart(includeDelay:Boolean):void
- reverse(forcePlay:Boolean):void
- getActive():Array
- mergeGroup(group:TweenGroup, startIndex:Number):void
- updateTimeSpan():void
- clear(killTweens:Boolean):void
(还有 addEventListener() )
实用方法:
//-- 所有 动画 做同一渲染. BaseTweenClass 代表 [TweenLite | TweenMax]
- allTo(targets:Array, duration:Number, vars:Object, BaseTweenClass:Class):TweenGroup
//-- 所有 动画 做同一渲染. BaseTweenClass 代表 [TweenLite | TweenMax]
- allFrom(targets:Array, duration:Number, vars:Object, BaseTweenClass:Class):TweenGroup
//-- 转换
- parse(tweens:Array, BaseTweenClass:Class):Array
属性:
- length : uint
- progress : Number //-- 跳播
- progressWithDelay : Number
- paused : Boolean
- reversed : Boolean //-- 激活倒放
- duration : Number [只读,不能修改]
- durationWithDelay : Number [只读,不能修改]]
- align : String //-- 对齐
- stagger : Number //-- 错开
- onComplete : Function
- onCompleteParams : Array
- loop : Number
- yoyo : Number //-- 来回,返回
- tweens : Array
- timeScale : Number (仅支持 TweenMax 动画实例) //-- 快进,快退
示例:
3个动画 时序渲染:
import gs.*;
var tween1:TweenLite = new TweenLite(mc, 1, {x:300});
var tween2:TweenLite = new TweenLite(mc, 3, {y:400});
var tween3:TweenMax = new TweenMax(mc, 2, {blurFilter:{blurX:10, blurY:10}});
var myGroup:TweenGroup = new TweenGroup([tween1, tween2, tween3]);
myGroup.align = TweenGroup.ALIGN_SEQUENCE;
若想动画类型相同,如下:
var myGroup:TweenGroup = new TweenGroup([{target:mc, time:1, x:300}, {target:mc, time:3, y:400}, {target:mc, time:2, blurFilter:{blurX:10, blurY:10}}], TweenMax, TweenGroup.ALIGN_SEQUENCE);
插入新动画:
myGroup.splice(2, 0, new TweenLite(mc, 3, {alpha:0.5}));
暂停并跳到 0.5秒:
myGroup.pause();
myGroup.progress = 0.5;
注意事项:
- 4KB
- 过时的用法,因为性能原因:
TweenMax.sequence(), TweenMax.multiSequence(), TweenMax.allTo(), TweenMax.allFrom()
- 从组内删除动画时并没有真正删除动画,它会继续运行,因些必须清除它:
TweenLite.removeTween()
- 如果动画不播放,可能是重写问题.参考:
http://blog.greensock.com/overwritemanager/
- 因为这个类比较新,我们将会更新它,如果遇到BUG,请告诉我们.
这是个发牌的例子:
TweenGroup 中 "from " 的替代解决方案:
//-- 设置动画参数
for(var i:int = 8;i >= 0;i--){
cardList[i].alpha = 0.5;
var tween:TweenLite =
new TweenLite(cardList[i], 0.5, {x:391.5, y:180, alpha:1,
roundProps:[x,y],onComplete:doComplete, onCompleteParams:[[9-i]]} );
tweenList.push(tween);
}
//-- 建议使用构造,这种方式比较简单,当然你也可以一个一个的 PUSH,SPLICE,然后设置每个单独的属性
var tweenGroup:TweenGroup = new TweenGroup(tweenList);
tweenGroup.align = TweenGroup.ALIGN_SEQUENCE; //-- 一个接一个的发牌
tweenGroup.stagger = 0; //-- 组内动画间隔 0ms
tweenGroup.progress = 1; //-- 直接跳到结束,注意,这个播放过程是存在的,但时间极短,也许是 1ms.
tweenGroup.reversed = true; //-- 必须要.
------------------------
tweenGroup.addEventListener(Event.COMPLETE, doAllComplete); //-- 组动画完成处理
-----------
这个类静态的方法,也很方便,但动画的播放不能错开.
http://blog.sina.com.cn/s/blog_4845d00a0100cf5e.html
