VGroup：如何在添加/刪除時順利地顯示新元素（調整大小）

Question

向VGroup添加/刪除元素/從VGroup刪除元素我需要它順利發生，調整項目大小。我相信我必須使用過渡效果。但是如何？

1. 在項目（元素）級別？
2. 在VGroup級別？
3. 我應該使用DataGroup，並在ItemRenderer級別執行它？

我一直試圖在項目級別做到這一點，但我仍然沒有設法使其工作，並且不知何故它感覺不對。感覺它應該在更高層次上完成。

例如，我定義了一個「死亡」狀態，將項目的大小調整爲height = 0。但是，在縮小之後，它必須以某種方式通知VGroup，以便將其從VGroup中移除或移除。感覺不必要的複雜。

我所希望的是一種將效果與從VGroup插入和刪除項目相關聯的方法？有任何想法嗎？

由於提前， 努諾

Answer 1

我相信我找到了正確的方法來做到這一點。有兩個事件「addedEffect」和「removedEffect」，當組件被添加爲VGroup的子項時調用它們。

<?xml version="1.0" encoding="utf-8"?> 
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" 
     width="100%" 
     addedEffect="{addedEffect}" 
     removedEffect="{removedEffect}" 
     clipAndEnableScrolling="true" xmlns:gui="gui.*"> 

    <fx:Declarations> 

    <s:Sequence id="addedEffect" targets="{[this, callWindow]}"> 
     <s:Move duration="300" xTo="0" target="{callWindow}" /> 
    </s:Sequence> 

    <s:Sequence id="removedEffect" targets="{[this, callWindow]}"> 
     <s:Move duration="300" xFrom="0" xTo="300" target="{callWindow}" /> 
     <s:Scale target="{this}" 
       scaleYFrom="1.0" scaleYTo="0.0" 
       duration="300"/> 
    </s:Sequence> 

    </fx:Declarations> 

    <gui:CallWindow id="callWindow" 
        width="100%" minHeight="0" x="300" /> 

</s:Group> 

所以它是在項目級完成的，但有一個很好的方法來做到這一點。

謝謝， Nuno

Answer 2

我已經把下面的代碼在HGroup（將是完全一樣的VGroup）做當這些部件被添加到面板/容器的大小調整的效果，能指出你在正確的方向。你可以看到它的工作一個下面的鏈接：

http://bbishop.org/blog/?p=448

public class ComboContainer extends HGroup 
    { 
     private var resizeEffect:Resize; 
     private var fadeEffect:Fade; 

     private var defaultHeight:int = 50; 

     public function ComboContainer() 
     { 
      super(); 
      this.height 0; 
      this.verticalAlign = flashx.textLayout.formats.VerticalAlign.MIDDLE;  
      this.addEventListener(FlexEvent.CREATION_COMPLETE, onCreationComplete); 
     } 

     private function onCreationComplete(event:Event):void{ 

      resizeEffect = new Resize(); 
      resizeEffect.heightFrom = 0; 
      resizeEffect.heightTo = defaultHeight; 
      resizeEffect.duration = 200; 

      fadeEffect = new Fade(); 
      fadeEffect.alphaFrom = 0; 
      fadeEffect.alphaTo = 1; 
      fadeEffect.duration = 200; 

      fadeEffect.play([this]); 
      resizeEffect.play([this]); 
     }