0

我想编写一个转换，其中来自 State1 的所有元素围绕 Y 轴旋转，然后显示来自 State2 的元素 这在下面的虚拟代码中说明（想象一下 Label 1 是一个组）。 

<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" 
        xmlns:mx="library://ns.adobe.com/flex/mx">
 <s:states>
  <s:State name="State1"/>
  <s:State name="State2"/>
 </s:states>
 <s:transitions>
  <s:Transition fromState="*" toState="State2" autoReverse="true">
   <s:Rotate3D target="{label2}" angleYFrom="-90" angleYTo="0" autoCenterTransform="true" duration="1000"/>
  </s:Transition>
 </s:transitions>
 <fx:Declarations>
  <s:Rotate3D id="phaseOut" target="{label1}" angleYFrom="0" angleYTo="90" autoCenterTransform="true" duration="1000" effectEnd="currentState='State2'" />
 </fx:Declarations>
 <s:Label id="label1" includeIn="State1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
 <s:Label id="label2" includeIn="State2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
 <s:Button label="Change" horizontalCenter="0" verticalCenter="30" click.State1="phaseOut.play()" click.State2="currentState='State1'"/>
</s:WindowedApplication>

我的第一个问题是当状态转换被调用时，来自 State1 的所有元素都已经消失了，因此我必须将转换拆分为两个 hack（请参阅“phaseOut”）这看起来真的很糟糕，因为我本质上是在重写转换机制。
Q1：是否有一种“干净”的方式来过渡不属于 State2 的元素？

第二个问题是当您恢复到状态 1 时，元素已被旋转。
Q2：动画有没有“autoReverse”之类的东西？

谢谢你的时间！

4

2 回答 2

1

您可以添加 'remove' 过滤器来隔离仅对正在移除的项目的效果，而不是执行两个转换，并使用 RemoveChildAction 让转换知道何时执行删除项目的操作。

RemoveChildAction 的相关信息：

http://livedocs.adobe.com/flex/3/langref/mx/effects/RemoveChildAction.html

过滤器信息：http: //livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#filter

效果有一种反向播放的方法：http: //livedocs.adobe.com/flex/3/langref/mx/effects/Effect.html#reverse%28%29

尽管我从人们那里听到的关于它有多成功的结果喜忧参半。

于 2010-05-11T12:38:43.553 回答
0

使用 viewstacks 似乎可以很好地解决问题：

<?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" >
    <fx:Declarations>
        <s:Rotate3D id="phaseOut" angleYFrom="0" angleYTo="90" duration="500" autoCenterTransform="true" />
        <s:Rotate3D id="phaseIn" angleYFrom="-90" angleYTo="0" duration="500" autoCenterTransform="true" startDelay="500" />
    </fx:Declarations>
    <mx:ViewStack id="viewstack1" width="200" height="200" horizontalCenter="0" verticalCenter="0">
        <s:NavigatorContent label="View 1" width="100%" height="100%" hideEffect="{phaseOut}" showEffect="{phaseIn}" >
            <s:Label id="label1" text="This is state 1" horizontalCenter="0" verticalCenter="0"/>
        </s:NavigatorContent>
        <s:NavigatorContent label="View 2" width="100%" height="100%"  hideEffect="{phaseOut}" showEffect="{phaseIn}">
            <s:Label id="label2" text="This is state 2" horizontalCenter="0" verticalCenter="0"/>
        </s:NavigatorContent>
    </mx:ViewStack>
    <s:Button label="Toggle" click="viewstack1.selectedIndex=(viewstack1.selectedIndex==0?1:0)"  horizontalCenter="0" top="10"/>
</s:Application>

代码整洁，效果完全符合预期

于 2010-05-11T12:47:39.503 回答