无法使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的专项规划，这应该做工精细，它会摆脱状态之间的爆裂。