Stati di transizione quando gli elementi vengono rimossi

Question

desidero scrivere un transizione in cui tutti gli elementi di State1 ruotano intorno all'asse Y e poi mostrare elementi Stato2 Questo s illustrato nel codice fittizio in basso (solo immaginare Etichetta 1 è un gruppo).

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

Il mio primo problema è quando la transizione di stato viene richiamato, tutti gli elementi da State1 sono già andati, quindi devo dividere la transizione a due hack (vedi "graduale eliminazione") Questo sembra veramente poveri poiché sono essenzialmente rewritting il meccanismo di transizione.
Q1:? Esiste un modo "pulito" per gli elementi di transizione che non appartengono a Stato2

Il secondo problema è quando si tornare a Stato 1, gli elementi sono stati ruotati.
Q2:? C'è una cosa come "Autoreverse" per le animazioni

Grazie per il vostro tempo!

Answer 1

Utilizzando viewstacks sembra fare il trucco bene:

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

Il codice è pulito e l'effetto è exactely come previsto

Answer 2

Invece di fare due transizioni, è possibile aggiungere il filtro 'remove' per isolare un effetto solo sugli articoli in corso di rimozione e utilizzare il RemoveChildAction per far conoscere di transizione, quando per eseguire l'azione per rimuovere gli elementi.

Informazioni su RemoveChildAction:

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

Informazioni sui filtri: http://livedocs.adobe.com/flex/ 3 / langref / mx / effetti / Effect.html # filtro

Effetti hanno un metodo di inversione di giocare in senso inverso: http: //livedocs.adobe. com / flex / 3 / langref / mx / effetti / Effect.html # inverso% 28% 29

Anche se ho sentito risultati misti da parte di persone su quanto successo sia.