フレックストランジションをスムーズに動作させることはできません

Question

フレックストランジションを魅力的な方法で動作させる方法を理解しようとしています。私は彼らが非常に不安定に見えることなく彼らを働かせることはできません。

私はこれを説明するために愚かなデモンストレーションアプリケーションを添付しました。これは、カスタム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="true"を追加することによってこれを行うことができますが、私はまた、次の単一の遷移にそれらを簡素化を提案し、代わりにMX AnimatePropertyのスパークResize効果を使用したい：あなたの場合は、次に

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

コンポーネント自体の widthの値を定義し、移行は残りの世話をします：

normalと selected状態の値の間に「ポッピング」の世話をする必要があります

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

。ホバリングの問題について：

（1）オートリバースアーキテクチャの主要な注意点または不足の1つは、A-> BおよびB-> A.第3の状態に移行しようとすると（あなたのケースでは "ホバリング"）、自動逆転は失敗します。不幸が、少なくとも我々は、自動反転、しかし、この問題を回避するには、少なくともあなたが投稿したItemRenderer簡単なため、そこにある

のFlex 3でさえもオプションではありませんでしたありますhovered状態を削除してください全部。

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

は、限り、あなたはホバー状態の間たItemRendererに特別な何かを行う上で計画していないとして、これは正常に動作する必要があり、それは状態間のポッピングを取り除くでしょう。