TweenGroup 教程 & 使用

内容:

 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