1

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

我附上了一个愚蠢的演示应用程序来说明这一点。它显示了一个具有自定义 ItemRenderer 的列表。When an item in the list is selected, the TextInput should slowly grow wider. 当取消选择一个项目时，TextInput 应该会慢慢缩小。

这个实现有两个问题使它看起来很丑。这些可以通过单击列表上的关于使项目动画来查看。这些问题是：

  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>
4

1 回答 1

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 在 Adob​​e TV 上关于 Auto-Reversing Transitions 的视频，他指出自动反转架构的主要警告或不足之一是它仅处理从 A->B 和 B->一个。如果您尝试转换到第三种状态（在您的情况下为“悬停”），自动反转将失败。不幸的是，但至少我们有自动反转功能，这在 Flex 3 中甚至都不是一个选项。

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

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

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

于 2011-08-04T18:52:19.647 回答