2011-03-28 22 views
1

我有兩種狀態。當我從OFF切換到A時,它會正確調整大小,但是當我從A切換回OFF時,會發生沒有平滑調整大小過渡的情況。我究竟做錯了什麼?在Flex 4中,狀態轉換不會在兩個方向調整大小

這裏是我的代碼:

<?xml version="1.0" encoding="utf-8"?> 
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
    <![CDATA[ 
     protected function butA_changeHandler(e:Event):void 
     {  
     if ((e.target as ToggleButton).selected) { 
      this.currentState="A"; 
     } else { 
      this.currentState="off"; 
     } 
     } 
    ]]> 
    </fx:Script> 

    <s:states> 
    <s:State name="off" /> 
    <s:State name="A" /> 
    </s:states> 

    <s:transitions> 
    <s:Transition fromState="off" toState="A" autoReverse="true"> 
     <s:Parallel duration="300"> 
     <s:Resize target="{content}" heightTo="{cA.height}" /> 
     <s:Fade targets="{cA}"/> 
     </s:Parallel> 
    </s:Transition> 
    <s:Transition fromState="A" toState="off" autoReverse="true"> 
     <s:Parallel duration="300"> 
     <s:Resize target="{content}" heightTo="0" /> 
     <s:Fade targets="{cA}"/> 
     </s:Parallel> 
    </s:Transition> 
    </s:transitions> 

    <s:Group id="content" excludeFrom="off" width="100%" clipAndEnableScrolling="true"> 
    <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group> 
    </s:Group> 

    <s:HGroup> 
    <s:ToggleButton id="butA" label="A" change="butA_changeHandler(event)"/> 
    </s:HGroup> 

</s:VGroup> 

由於提前, 努諾

回答

3

您應該同時使用AddAction和RemoveAction,因爲includeIn和excludeFrom屬性在轉換前處理: 。

<s:transitions> 
     <s:Transition fromState="off" toState="A" autoReverse="true"> 
      <s:Sequence> 
       <s:AddAction target="{content}" /> 
       <s:Parallel duration="300"> 
        <s:Resize target="{content}" heightTo="{cA.height}" /> 
        <s:Fade targets="{cA}"/> 
       </s:Parallel> 
      </s:Sequence> 

     </s:Transition> 
     <s:Transition fromState="A" toState="off" autoReverse="true"> 
      <s:Sequence> 
       <s:Parallel duration="300"> 
        <s:Resize target="{content}" heightTo="0" /> 
        <s:Fade targets="{cA}"/> 
       </s:Parallel> 
       <s:RemoveAction target="{content}" /> 
      </s:Sequence> 
     </s:Transition> 
    </s:transitions> 

    <s:Group id="content" width="100%" clipAndEnableScrolling="true"> 
     <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group> 
    </s:Group> 

從使用heightFrom和widthFrom的尺寸開始調整尺寸,使它們實際爲動畫。 *注意:使用includeIn =「A」意味着你也暗示了conent將具有excludeFrom =「OFF」屬性。這意味着您將無法混合添加/刪除操作和includeIn/excludeFrom(一個用於添加視圖,另一個用於刪除它們)。

+0

你好凱文,非常感謝你!它像一個魅力。儘管如此,儘管我已經在Adobe Flex文檔中瞭解了它,但我仍然不太瞭解AddAction/RemoveAction的必要性:-(如果您想解釋我將會非常感謝,謝謝!Nuno – nununo 2011-04-05 10:35:38

+0

So你的意思是我不能使用addAction/removeAction和一個使用includeIn/excludeFrom的目標嗎?這很令人困惑,因爲即使這個例子沒有這個,這正是我在真實生活中需要的。 – nununo 2011-04-05 11:08:28

+0

AddAction/RemoveAction和includeIn/excludeFrom都在做同樣的事情 - 在已經在顯示列表中的父容器中添加/刪除顯示對象。問題是,您希望使用轉換來觸發剛剛從顯示列表中移除的顯示對象上的動畫通過一個excludeFrom。你以前的序列: 狀態變化 - > includeFrom/excludeFrom的處理 - >轉換過程隱藏 您可以先手動播放動畫,然後更改視圖狀態以解決問題: 手動播放動畫,不添加/刪除操作 - >狀態更改 – 2011-04-05 12:22:22

1

autoreverse設置爲true必須是冗餘的第二個過渡。它已經將A定義爲關閉。在第一次轉換中只需添加heightFrom

+0

嗨科迪亞克,謝謝。我在第一個過渡中添加了'heightFrom',並刪除了'autoreverse'。我甚至在第二次轉換中加了'heightTo'。但仍然沒有成功。我聽說也許我需要''在轉換,但我不明白如何使用它。 – nununo 2011-03-28 10:12:47

+0

其實我正在考慮離開'autoreverse'並刪除第二個轉換;''AddAction'鏈接到'AddChild',這裏你沒有使用它。 – Kodiak 2011-03-28 10:22:50

+0

我剛剛嘗試過,它也沒有工作。其實我想要建立的有幾個狀態:A,B,C,D。所以我期望有幾個轉換'(* to A)','(* to B)','(* to C)',然後'(*到OFF)'。我有一個工作示例,它可以在A,B和C之間正常切換。當我切換回OFF時,會出現問題。使用'AddChild'會有什麼意義? – nununo 2011-03-28 10:39:18

相關問題