1

Flexトランジションを魅力的なスムーズな方法で動作させる方法を理解しようとしています。それらが非常に途切れ途切れに見えることなしに、それらを機能させることはできません。

これを説明するために、ばかげたデモンストレーションアプリケーションを添付しました。カスタムItemRendererを持つリストが表示されます。リスト内の項目を選択すると、TextInputはゆっくりと広くなります。アイテムの選択を解除すると、TextInputはゆっくりと縮小します。

この実装には2つの問題があり、見栄えが悪くなります。これらは、リストをクリックしてアイテムをアニメートすることで確認できます。これらの問題は次のとおりです。

  1. アイテムがアニメーション化されているが「ホバー」状態に入ると、TextInputは小さなサイズにスナップバックします。どうしてこれなの？

  2. アイテムのアニメーションが中断されると、現在の値からアニメーションを続行するのではなく、最大サイズまたは最小サイズにスナップしてからアニメーションを開始します。なんで？

どんな助けでも大歓迎です。

ありがとう、Phil 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>
4

1 に答える 1

1

あなたの質問に答えるために、しかし逆の順序で：

autoReverse（2）スパークトランジションのプロパティである機能を使用したい。これは、現在のトランジションに追加するだけで実行できますがautoReverse="true"、次の単一のトランジションに単純化して、MXAnimatePropertyの代わりにSparkResizeエフェクトを使用することもお勧めします。

<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）自動反転トランジションに関するAdobeTVのChetHaaseのビデオをチェックすると、自動反転アーキテクチャの主な注意点または欠点の1つは、A->BおよびB->からの遷移のみを処理することであると述べています。 A。3番目の状態（この場合は「ホバー」）に移行しようとすると、自動反転は失敗します。残念ながら、少なくとも自動反転機能があります。これはFlex3ではオプションではありませんでした。

ただし、少なくとも投稿した単純なItemRendererには、回避策があります。状態を完全に削除してみてください。hovered

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

ホバー状態のときにItemRendererで特別なことをする予定がない限り、これは正常に機能するはずであり、状態間のポップを取り除きます。

于 2011-08-04T18:52:19.647 に答える