無法使Flex轉換行爲順利

Question

我想了解如何使Flex轉換以具有吸引力的流暢方式運行。沒有他們顯得非常波濤洶涌，我無法讓他們工作。

我附上了一個愚蠢的演示應用程序來說明這一點。它顯示了一個具有自定義ItemRenderer的List。當列表中的項目被選中時，TextInput應該慢慢變大。 當一個項目被取消選擇時，TextInput應該慢慢收縮。

這個實現有2個問題，使它看起來很醜。這些可以通過在列表上點擊來使項目變成動畫。這些問題是：

1. 當一個項目動畫但進入「懸停」狀態時，TextInput快速恢復爲小尺寸。爲什麼是這樣？

2. 當某個項目的動畫被打斷時，它將捕捉到最大或最小大小，然後開始動畫，而不是從當前值繼續動畫。爲什麼？

任何幫助非常感謝。

感謝， 菲爾 TestApplication.mxml

<?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" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      initialize="init(event)" 
      minWidth="900" minHeight="600"> 

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

     protected function init(event:FlexEvent):void { 
      var ac:ArrayCollection = new ArrayCollection(); 
      ac.addItem("A1"); 
      ac.addItem("B2"); 
      ac.addItem("C3"); 
      myList.dataProvider = ac; 
     } 
    ]]> 
</fx:Script> 

<s:List id="myList" width="410" height="350" itemRenderer="MyItemRenderer" requireSelection="true"/> 
</s:Application> 

MyItemRenderer.mxml

<?xml version="1.0" encoding="utf-8"?> 
<s:ItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" 
      xmlns:s="library://ns.adobe.com/flex/spark" 
      xmlns:mx="library://ns.adobe.com/flex/mx" 
      autoDrawBackground="true"> 
<s:states> 
    <s:State name="normal" /> 
    <s:State name="hovered" /> 
    <s:State name="selected" /> 
</s:states> 

<s:transitions> 
    <s:Transition fromState="*" toState="selected" id="itemHasBeenSelected" > 
     <mx:AnimateProperty property="width" toValue="300" duration="3000" target="{textInput}" /> 
    </s:Transition> 
    <s:Transition fromState="selected" toState="*" id="itemHasBeenUnselected"> 
     <mx:AnimateProperty property="width" toValue="100" duration="3000" target="{textInput}" /> 
    </s:Transition> 
</s:transitions> 

<s:Group width="100%"> 
    <s:Label text="{data}" color.selected="red" color.normal="black"/> 
    <s:TextInput x="100" id="textInput" width="100"/> 
</s:Group> 

</s:ItemRenderer> 

Answer 1

回答您的問題，但在相反的順序：

（2 ）你想使用autoReverse是火花轉換的屬性。你可以僅僅通過增加autoReverse="true"到當前的過渡做到這一點，但我也建議他們簡化爲以下單個過渡，並使用Spark Resize效果，而不是MX的animateProperty：如果你

<s:Transition autoReverse="true"> 
    <s:Resize target={textInput}" duration="3000"/> 
</s:Transition> 

然後，定義爲width組件本身的價值，過渡會照顧其餘的：

<s:TextInput x="100" id="textInput" width.normal="100" width.selected="300"/> 

這應該採取normal和selected狀態的值之間的關懷「啪」。至於懸停問題：

（1）如果您查看Chet Haase's video on Adobe TV on Auto-Reversing Transitions，他表示自動反轉體系結構中的一個主要警告或缺陷是它只處理從A-> B和B->一個。如果您嘗試嘗試轉換到第三個狀態（在您的情況下「懸停」），自動反轉將失敗。不幸的，但至少我們有自動換向，這是不是在Flex 3中

然而，即使一個選項，有一個解決辦法，至少對你發佈簡單的ItemRenderer：嘗試取出hovered狀態共。

<!--s:State name="hovered" /--> 

只要你不上懸停的狀態時做其他事情的ItemRenderer的專項規劃，這應該做工精細，它會擺脫狀態之間的爆裂。