2011-03-28 48 views
1

我有两种状态。当我从OFF切换到A时,它会正确调整大小,但是当我从A切换回OFF时,会发生没有平滑调整大小过渡的情况。我究竟做错了什么?在Flex 4中,状态转换不会在两个方向调整大小

这里是我的代码:

<?xml version="1.0" encoding="utf-8"?> 
<s:VGroup xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx"> 

    <fx:Script> 
    <![CDATA[ 
     protected function butA_changeHandler(e:Event):void 
     {  
     if ((e.target as ToggleButton).selected) { 
      this.currentState="A"; 
     } else { 
      this.currentState="off"; 
     } 
     } 
    ]]> 
    </fx:Script> 

    <s:states> 
    <s:State name="off" /> 
    <s:State name="A" /> 
    </s:states> 

    <s:transitions> 
    <s:Transition fromState="off" toState="A" autoReverse="true"> 
     <s:Parallel duration="300"> 
     <s:Resize target="{content}" heightTo="{cA.height}" /> 
     <s:Fade targets="{cA}"/> 
     </s:Parallel> 
    </s:Transition> 
    <s:Transition fromState="A" toState="off" autoReverse="true"> 
     <s:Parallel duration="300"> 
     <s:Resize target="{content}" heightTo="0" /> 
     <s:Fade targets="{cA}"/> 
     </s:Parallel> 
    </s:Transition> 
    </s:transitions> 

    <s:Group id="content" excludeFrom="off" width="100%" clipAndEnableScrolling="true"> 
    <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group> 
    </s:Group> 

    <s:HGroup> 
    <s:ToggleButton id="butA" label="A" change="butA_changeHandler(event)"/> 
    </s:HGroup> 

</s:VGroup> 

由于提前, 努诺

回答

3

您应该同时使用AddAction和RemoveAction,因为includeIn和excludeFrom属性在转换前处理: 。

<s:transitions> 
     <s:Transition fromState="off" toState="A" autoReverse="true"> 
      <s:Sequence> 
       <s:AddAction target="{content}" /> 
       <s:Parallel duration="300"> 
        <s:Resize target="{content}" heightTo="{cA.height}" /> 
        <s:Fade targets="{cA}"/> 
       </s:Parallel> 
      </s:Sequence> 

     </s:Transition> 
     <s:Transition fromState="A" toState="off" autoReverse="true"> 
      <s:Sequence> 
       <s:Parallel duration="300"> 
        <s:Resize target="{content}" heightTo="0" /> 
        <s:Fade targets="{cA}"/> 
       </s:Parallel> 
       <s:RemoveAction target="{content}" /> 
      </s:Sequence> 
     </s:Transition> 
    </s:transitions> 

    <s:Group id="content" width="100%" clipAndEnableScrolling="true"> 
     <s:Group id="cA" includeIn="A" width="100%"><s:Label fontSize="70" text="A"/></s:Group> 
    </s:Group> 

从使用heightFrom和widthFrom的尺寸开始调整尺寸,使它们实际为动画。 *注意:使用includeIn =“A”意味着你也暗示了conent将具有excludeFrom =“OFF”属性。这意味着您将无法混合添加/删除操作和includeIn/excludeFrom(一个用于添加视图,另一个用于删除它们)。

+0

你好凯文,非常感谢你!它像一个魅力。尽管如此,尽管我已经在Adobe Flex文档中了解了它,但我仍然不太了解AddAction/RemoveAction的必要性:-(如果您想解释我将会非常感谢,谢谢!Nuno – nununo 2011-04-05 10:35:38

+0

So你的意思是我不能使用addAction/removeAction和一个使用includeIn/excludeFrom的目标吗?这很令人困惑,因为即使这个例子没有这个,这正是我在真实生活中需要的。 – nununo 2011-04-05 11:08:28

+0

AddAction/RemoveAction和includeIn/excludeFrom都在做同样的事情 - 在已经在显示列表中的父容器中添加/删除显示对象。问题是,您希望使用转换来触发刚刚从显示列表中移除的显示对象上的动画通过一个excludeFrom。你以前的序列: 状态变化 - > includeFrom/excludeFrom的处理 - >转换过程隐藏 您可以先手动播放动画,然后更改视图状态以解决问题: 手动播放动画,不添加/删除操作 - >状态更改 – 2011-04-05 12:22:22

1

autoreverse设置为true必须是冗余的第二个过渡。它已经将A定义为关闭。在第一次转换中只需添加heightFrom

+0

嗨科迪亚克,谢谢。我在第一个过渡中添加了'heightFrom',并删除了'autoreverse'。我甚至在第二次转换中加了'heightTo'。但仍然没有成功。我听说也许我需要''在转换,但我不明白如何使用它。 – nununo 2011-03-28 10:12:47

+0

其实我正在考虑离开'autoreverse'并删除第二个转换;''AddAction'链接到'AddChild',这里你没有使用它。 – Kodiak 2011-03-28 10:22:50

+0

我刚刚尝试过,它也没有工作。其实我想要建立的有几个状态:A,B,C,D。所以我期望有几个转换'(* to A)','(* to B)','(* to C)',然后'(*到OFF)'。我有一个工作示例,它可以在A,B和C之间正常切换。当我切换回OFF时,会出现问题。使用'AddChild'会有什么意义? – nununo 2011-03-28 10:39:18

相关问题