Gray Liao: 一起來玩鳥　Starling Framework（6）Juggler、Tween、以及DelayCall

這篇開始來講Starling裡的Animation。Juggle是個簡單的Class，用來控制動畫的進行。他負責管理經由add()加進來的實現IAnimatable介面的物件，然後當Juggler的advanceTime()被呼叫時，它會負責去呼叫這些IAnimatable的advanceTime()，讓動畫進行下去；而當某個IAnimatable到達complete狀態時，則會被Juggler踢出去。我們就只要負責每個frame去呼叫Juggler的advanceTime()就好。而Starling class裡有個預設的juggler，當Starling.current正在運行時，Starling.juggler在每個frame時會自動被呼叫advanceTime()。通常我們把遊戲裡的動畫加到Starling.juggler裡，而一些特殊的動畫，例如遊戲暫停時要撥放的動畫，再加到另一個我們新增的Juggler，然後每個frame去呼叫它的advanceTime()。這裡講的每個frame，我們是使用EnterFrameEvent.ENTER_FRAME，而不是Event.ENTER_FRAME，因為EnterFrameEvent可以取得passedTime，這個passTime是指跟上一次事件發生經過的時間，可以傳給Juggle的advanceTime()的第一個參數。用經過時間來播放動畫，這樣就不會受frame數不穩定而影響動畫撥放的時間。

而要實現IAnimatable介面，只要實作advanceTime()這個方法，並且要設定一個complete條件，當達到這個條件時將自己的isComplete設為true，這樣就可以自動被Juggle移除。在Starling裡面，實現IAnimatable介面的除了Juggle以外，目前還有三種：Tween、DelayedCall以及MovieClip。接下來我們先來談前兩個。Tween的概念跟native的Tween或其他Tween API類似。Tween建構式可傳入三個參數，第一個是要產生動畫的目標，第二個是時間，第三個是transition，也就是ease function。transition可以查一下Transition Class，目前支援的function比起TweenMax這類的API要少得多，看看之後會不會新增，或者有沒有Extension可以用。新增了一個Tween之後，接著要設定要被改變的屬性。一般的數值型屬性可以使用animate()來設定，第一個參數是屬性名稱，使用字串來輸入，例如"x"，"rotation"等；第二個是目標值，例如0.5，20等等。常用的位移，改變大小，改變alpha值分別有對應的方法可以使用。也有onStart，onUpdate，onComplete等function可以設定。設定完Tween就使用Juggler的add將tween加進動畫執行。

DelayCall，顧名思義就是過一定時間之後再去呼叫某function。DelayedCall的建構式，第一個指定要call的function，第二個是delay時間，第三個是function需要的參數，用一個Array依序填入。設定好一樣要加到Juggler才會跑。

我們來寫個範例，在場景上放一個Button跟一個Image，當這個Button triggered，產生一個Tween去讓Image做些動畫，這個Tween我們交給Starling.juggler自動執行。當這個Tween執行完，我們新增一個DelayedCall，讓它停一小段時間之後，呼叫一個function，讓Image與Button回到原來的狀態。而這個DelayCall我們故意加到一個我們新增的Juggler，然後監聽EnterFrameEvent.ENTER_FRAME去呼叫這個Juggler的advanceTime()。程式碼如下：

public class Game6 extends Sprite 
{
  private var _container:Sprite;
  private var _image:Image;
  private var _button:Button;
  [Embed(source = "/assets/btnBg.png")]
  private static const BtnBitmap:Class;
  [Embed(source = "/assets/btnDownBg.png")]
  private static const BtnDownBitmap:Class;
  [Embed(source = "/assets/head.png")]
  private static const HeadBitmap:Class;
  private var _juggler:Juggler;
 
  public function Game6() 
  {
    super();
    addEventListener(Event.ADDED_TO_STAGE, init);
  }

  private function init(e:Event):void
  {
    removeEventListener(Event.ADDED_TO_STAGE, init);

    _container = new Sprite();
    addChild(_container);
    addChild(new Stats());

    //新增一個Juggler
    _juggler = new Juggler();
  
    //新增一個Image
    _image = new Image(Texture.fromBitmap(new HeadBitmap()));
    _image.x = 300;
    _image.y = 200;
    _image.pivotX = _image.width >> 1;
    _image.pivotY = _image.height >> 1;
    _container.addChild(_image);

    //新增一個Button
    var btnTexture:Texture = Texture.fromBitmap(new BtnBitmap());
    var btnDownTexture:Texture = Texture.fromBitmap(new BtnDownBitmap());
    _button = new Button(btnTexture, "Tween", btnDownTexture);
    _button.x = 200;
    _button.y = 30;
    _container.addChild(_button);
    _button.addEventListener(Event.TRIGGERED, buttonTriggered);//監聽_button triggered事件
  }

  private function buttonTriggered(e:Event):void
  {
    _button.enabled = false;//_button disable
    var tween:Tween = new Tween(_image, 2, Transitions.EASE_OUT_BOUNCE);//新增一個Tween，控制_image
    tween.animate("rotation", Math.PI / 2);//增加旋轉動畫
    tween.moveTo(300, 400);//增加位移動畫
    tween.fadeTo(0.5);//改變alpha
    tween.scaleTo(0.5);//改變大小
    tween.onComplete = tweenComplete;//結束時呼叫tweenComplete
    Starling.juggler.add(tween);//將tween加到Starling.juggler自動執行
  }

  private function tweenComplete():void 
  {
    var delayedCall:DelayedCall = new DelayedCall(imageBack, 0.5);//新增一個DelayedCall，過0.5秒呼叫imageBack()
    //Starling.juggler.add(delayedCall);//可以直接加到Starling.juggler自動執行，但我們故意加到新增的_juggler
    _juggler.add(delayedCall);//將delayedCall加到_juggler
    addEventListener(EnterFrameEvent.ENTER_FRAME, onEnterFrame);//要手動監聽EnterFrameEvent.ENTER_FRAME，去呼叫_juggle.advanceTime()
  }

  private function onEnterFrame(e:EnterFrameEvent):void 
  {
    _juggler.advanceTime(e.passedTime);//手動執行_juggler.advanceTime()，將e.passedTime傳入
  }

  private function imageBack():void
  {
    removeEventListener(EnterFrameEvent.ENTER_FRAME, onEnterFrame);//移除監聽
    //讓image回到原來狀態，_button enable
    _image.x = 300;
    _image.y = 200;
    _image.alpha = 1;
    _image.rotation = 0;
    _image.scaleX = _image.scaleY = 1;
    _button.enabled = true;
  }
}

Demo如下：