如何停止皮膚動畫？

Question

我有一個附加了皮膚的自定義組件。
這個組件有幾種不同的皮膚，它們都是不同的動畫。因此，我用skinClasses包含了動畫。
當組件不再可見時，我需要能夠停止動畫，以便它們不會在後臺運行。

如何在皮膚上調用停止功能？

我的猜測是添加兩個皮膚狀態：「animationState」和「idleState」。
但是，當調用close()時，以下代碼不會停止動畫。 skinState不會更改。

package { 
    import spark.components.supportClasses.SkinnableComponent; 

    [SkinState("animationState")] 
    [SkinState("idleState")] 

    public class AnimatedComponent extends SkinnableComponent 
    { 
     public function AnimatedComponent 
     { 
      setStyle("skinClass", MyAnimatedComponentSkin); 
     } 

     public function start():void 
     { 
      _isAnimating = true; 
      invalidateSkinState(); 
     } 
     public function close():void 
     { 
      _isAnimating = false; 
      invalidateSkinState(); 
     } 

     private var _isAnimating:Boolean = false; 
     override protected function getCurrentSkinState():String 
     { 
      return _isAnimating ? "animationState" : "idleState"; 
     } 
    } 
} 

Answer 1

下面是我做的一個實例的方式（這實際上並沒有回答我的問題可言，但它的工作，因爲我需要的東西。希望這可以幫助其他人有類似的問題所困擾）。

我有一個自定義換膚標題和一個「停止」按鈕的應用程序。
我創建了一個名爲MyCustomTitle的基類，它擴展了spark.components.supportClasses.SkinnableComponent，並使用樣式表「main.css」將skinclass應用到它。

此外，當應用程序從瀏覽器加載時，網絡腳本將「主題」參數傳遞給應用程序（this.parameters.theme）。這允許用戶選擇主題，這將決定皮膚/動畫。

<?xml version="1.0" encoding="utf-8"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
       xmlns:s="library://ns.adobe.com/flex/spark" 
       applicationComplete="application1_applicationCompleteHandler(event)"> 

    <fx:Style source="main.css" /> 

    <fx:Script> 
     <![CDATA[ 
      import mx.events.FlexEvent; 

      /** 
      * An custom component that displays an animated Label 
      */ 
      public var myComponent:MyCustomTitle; 

      protected function application1_applicationCompleteHandler(event:FlexEvent):void 
      { 
       var theme:String = this.parameters.theme;     
       switch(theme) { 
        case "red": 
         myComponent = new MyScalingTitle();      
         break; 
        default: 
         myComponent = new MyFadingTitle();      
         break; 
       } 
       myComponent.styleName = theme; 
       myComponent.text = "Hello World"; 
       addElementAt(myComponent, 0); 
       myComponent.init(); 
      } 

      private function stop_clickHandler(event:MouseEvent):void 
      { 
       myComponent.stop(); 
      } 

     ]]> 
    </fx:Script> 

    <s:layout> 
     <s:VerticalLayout /> 
    </s:layout> 

    <s:Button label="STOP" click="stop_clickHandler(event)"/> 
</s:Application> 

這裏是CSS文件，它定義皮膚：

/* CSS file */ 
@namespace s "library://ns.adobe.com/flex/spark"; 
@namespace mx "library://ns.adobe.com/flex/mx"; 
@namespace local "*"; 


local|MyCustomTitle 
{ 
    skinClass: ClassReference("MyCustomTitleBlueSkin"); 
} 

local|MyCustomTitle.red 
{ 
    skinClass: ClassReference("MyCustomTitleRedSkin"); 
} 

這裏是 「紅色」 皮膚：

<?xml version="1.0" encoding="utf-8"?> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark"> 
    <!-- host component --> 
    <fx:Metadata> 
     [HostComponent("MyCustomTitle")] 
    </fx:Metadata> 

    <!-- SkinParts 
    name=labelDisplay, type=spark.components.Label, required=true 
    --> 
    <s:Label id="labelDisplay" color="0xFF0000" /> 
</s:Skin> 

而 「藍色」 之一：

<?xml version="1.0" encoding="utf-8"?> 
<s:Skin xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"> 
    <!-- host component --> 
    <fx:Metadata> 
     [HostComponent("MyCustomTitle")] 
    </fx:Metadata> 

    <!-- SkinParts 
    name=labelDisplay, type=spark.components.Label, required=true 
    --> 
    <s:Label id="labelDisplay" color="0x0000FF" /> 
</s:Skin> 

我可以把動畫放在皮膚上上面的驢。這對於非重複動畫來說非常合適。但是，因爲這些動畫循環，我需要能夠在它們沒有被顯示時調用它們的stop()功能。由於我無法在皮膚中調用函數，因此我將動畫添加到hostComponent類中。

MyCustomTitle具有皮膚所需的labelDisplay屬性。
此處定義了動畫，因爲某些動畫屬性是在所有不同的主題之間共享的。但是，截至目前，動畫爲空。
該課程有一個init()方法來啓動動畫，以及stop()方法。

package 
{ 
    import spark.components.Label; 
    import spark.components.supportClasses.SkinnableComponent; 
    import spark.core.IDisplayText; 
    import spark.effects.Animate; 
    import spark.effects.animation.RepeatBehavior; 

    public class MyCustomTitle extends SkinnableComponent implements IDisplayText 
    { 
     //Custom component that has a label and a skin 

     [SkinPart(required="true")] 
     /** 
     * Button is required in the skin 
     */ 
     public var labelDisplay:Label; 

     //set common parameters that the animation will share 
     protected var animate:Animate;  
     override protected function createChildren():void 
     { 
      super.createChildren(); 
      labelDisplay.text = _label; 
      animate = createAnimation(); 
      if(animate != null) { 
       animate.repeatCount = 0; 
       animate.repeatBehavior = RepeatBehavior.REVERSE; 
       animate.duration = 500; 
      } 
     } 

     //build the animation here 
     protected function createAnimation():Animate 
     { 
      //override to create dynamic animation 
      return null; 
     } 

     //play the animation 
     public function init():void 
     { 
      if(animate != null) 
       animate.play([labelDisplay]); 
     } 

     //stop the animation 
     public function stop():void 
     { 
      if(animate != null) 
       animate.stop(); 
     } 

     //components implements IDisplayText 
     public function set text(value:String):void 
     { 
      _label = value; 
      if(labelDisplay) 
       labelDisplay.text = value; 
     } 

     public function get text():String 
     { 
      return _label; 
     } 
     private var _label:String; 

     public function get isTruncated():Boolean 
     { 
      return labelDisplay.isTruncated; 
     } 
    } 
} 

最後，我可以擴展MyCustomTitle，以便它可以爲每個主題一個不同的動畫。

主題的 「紅色」：

package 
{ 
    import spark.effects.Animate; 
    import spark.effects.Scale; 

    public class MyScalingTitle extends MyCustomTitle 
    {  
     override protected function createAnimation():Animate 
     { 
      var _scale:Scale = new Scale(labelDisplay); 
      _scale.scaleXFrom = 0; 
      _scale.scaleYFrom = 0; 
      _scale.scaleXTo = 1; 
      _scale.scaleYTo = 1; 
      return _scale; 
     } 
    } 
} 

主題 「藍色」：

package 
{ 
    import spark.effects.Animate; 
    import spark.effects.Fade; 

    public class MyFadingTitle extends MyCustomTitle 
    {  
     override protected function createAnimation():Animate 
     { 
      var _fade:Fade = new Fade(labelDisplay); 
      _fade.alphaFrom = 0; 
      _fade.alphaTo = 1; 
      return _fade; 
     } 
    } 
}