상태 요소가 제거 될 때의 천이

상태 1의 모든 요소가 Y 축 주위를 회전 한 다음 State2의 요소를 표시하는 천이를 작성하려고합니다. 아래의 더미 코드에 설명되어 있습니다 (레이블 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>

내 첫 번째 문제는 따라서 내가 ("phaseOut"참조)이 해킹으로의 전환을 분할해야, 상태 전이가 호출 될 때, State1 정에서 모든 요소가 이미 사라입니다 이 내가 있기 때문에 정말 가난한 보인다 기본적으로 전환 메커니즘을 다시 작성합니다.
1 : State2에 속하지 않는 요소를 전환하는 "깨끗한"방법이 있습니까?

두 번째 문제는 상태 1로 되돌리고 요소가 회전했을 때 발생합니다.
Q2 : 애니메이션에 "자동 반전"같은 것이 있습니까?

감사합니다.

출처

2010-05-11 MonoThreaded

사용 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>

코드는 단정하고

을 예상대로 효과가 exactely입니다

출처

2010-05-11 12:47:39 MonoThreaded