Question

我试图了解如何使Flex过渡以有吸引力的平滑方式运行。如果没有他们看起来非常波涛汹涌，我无法让他们工作。

我附上了一个愚蠢的演示应用程序来说明这一点。它显示了一个具有自定义ItemRenderer的List。选择列表中的项目时，TextInput应该慢慢变宽。取消选择某个项目时，TextInput应该慢慢收缩。

此实现存在两个问题，使其看起来很难看。通过单击列表上的“约”可以看到这些项目以使项目具有动画效果。这些问题是：

当项目动画但进入“悬停”状态时，TextInput会快速恢复到小尺寸。这是为什么？
当项目的动画中断时，它会捕捉到最大或最小的大小，然后开始动画，而不是从当前值继续动画。为什么呢？

非常感谢任何帮助。

谢谢，菲尔的 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能力，这是spark Transition的一个属性。您可以通过将autoReverse="true"添加到当前转换来实现此目的，但我还建议将它们简化为以下单个Transition，并使用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-> A的转换。。如果您尝试尝试转换到第三个状态（在您的情况下“悬停”），则自动反转将失败。不幸的是，但至少我们有自动反转，这在Flex 3中甚至都不是一个选项。

但是，有一种解决方法，至少对于您发布的简单ItemRenderer：尝试完全删除hovered状态。

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

只要您在悬停状态期间不打算在ItemRenderer中执行任何其他特殊操作，这应该可以正常工作，并且它将消除状态之间的弹出。

无法使Flex Transitions表现平稳

1 个答案: