Comment puis-je bien animer entre les viewstacks?

Question

J'ai une petite application Adobe Air et je veux avoir plusieurs "vues" à l'intérieur. Je peux réaliser ces vues en utilisant un ViewStack mais j'ai du mal à trouver une bonne façon d'animer entre eux.

C'est ce que je l'ai essayé et même si cela fonctionne, une vue disparait avant de glisser dans la vue quand ce que je veux est plus comme l'application DestroyTwitter où la vue et tous les contrôles glisser hors de la vue bien:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="700" top="100" left="100" creationComplete="onComplete()"> 
    <mx:Script> 
    <![CDATA[ 
     import mx.core.Application; 
     private function onComplete():void 
     { 
      stack.selectedChild = stack1; 
     } 

     private function switchTab():void 
     { 
      if(stack.selectedChild == stack1) 
      { 
       stack.selectedChild = stack2; 
      } 
      else 
      { 
       stack.selectedChild = stack1; 
      } 
     } 
    ]]> 
    </mx:Script> 

    <mx:Move id="slideLeft" xFrom="{Application.application.width}" xTo="0" yTo="0" duration="500" /> 
    <mx:Move id="slideRight" xFrom="0" xTo="{Application.application.width}" duration="500" /> 

    <mx:ViewStack id="stack" width="200%" height="100%"> 
     <mx:VBox id="stack1" width="100%" height="100%" backgroundColor="white" hideEffect="{slideRight}" > 
      <mx:Label text="Stack 1" /> 
      <mx:Button label="Switch" click="switchTab()" /> 
     </mx:VBox> 

     <mx:VBox id="stack2" width="100%" height="100%" backgroundColor="#cdcdcd" hideEffect="{slideLeft}" > 
      <mx:Label text="Stack 2" /> 
      <mx:Button label="Switch" click="switchTab()" /> 
     </mx:VBox> 

    </mx:ViewStack> 
</mx:WindowedApplication> 

Quelqu'un a-t-il de meilleures idées pour essayer, être reconnaissant pour toute réponse?

Answer 1

est ici exactement ce que je voulais réaliser:

<?xml version="1.0" encoding="utf-8"?> 
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" width="400" height="700" top="100" left="100" 
    horizontalScrollPolicy="off" verticalScrollPolicy="off" 
    > 

    <mx:Script> 
     <![CDATA[ 
      import mx.core.Application; 
     ]]> 
    </mx:Script> 


    <mx:states> 
    <mx:State name="One"> 
      <mx:SetProperty target="{stack1}" name="x" value="0"/> 
      <mx:SetProperty target="{stack1}" name="y" value="50"/> 
      <mx:SetProperty target="{stack1}" name="width" value="{Application.application.width}"/> 

      <mx:SetProperty target="{stack2}" name="x" value="{Application.application.width}"/> 
      <mx:SetProperty target="{stack2}" name="y" value="50"/> 
      <mx:SetProperty target="{stack2}" name="width" value="{Application.application.width}"/> 
    </mx:State> 

    <mx:State name="Two"> 
      <mx:SetProperty target="{stack1}" name="x" value="-{Application.application.width}"/> 
      <mx:SetProperty target="{stack1}" name="y" value="50"/> 
      <mx:SetProperty target="{stack1}" name="width" value="{Application.application.width}"/> 

      <mx:SetProperty target="{stack2}" name="x" value="0"/> 
      <mx:SetProperty target="{stack2}" name="y" value="50"/> 
      <mx:SetProperty target="{stack2}" name="width" value="{Application.application.width}"/> 
    </mx:State> 
    </mx:states> 


    <!-- Define Transition array with one Transition object.--> 
    <mx:transitions> 
     <!-- A transition for changing from any state to any state. --> 
     <mx:Transition id="myTransition" fromState="*" toState="*"> 
      <mx:Parallel id="t1" targets="{[stack1,stack2]}"> 
       <mx:Move duration="400"/> 
      </mx:Parallel> 
     </mx:Transition> 
    </mx:transitions> 

    <mx:HBox> 
     <mx:Button label="Switch To Two" click="currentState='Two'" /> 
     <mx:Button label="Switch To One" click="currentState='One'" /> 
    </mx:HBox> 

    <mx:Canvas id="stack1" x="0" y="50" width="100%" height="100%" borderThickness="1" borderStyle="solid"> 
     <mx:VBox width="100%" height="100%" backgroundColor="white"> 
      <mx:Label text="Stack 1" /> 
      <mx:Box backgroundColor="red" width="20" height="20" /> 
     </mx:VBox> 
    </mx:Canvas> 

    <mx:Canvas id="stack2" x="{Application.application.width}" y="50" width="100%" height="100%" borderThickness="1" borderStyle="solid"> 
     <mx:VBox width="100%" height="100%" backgroundColor="#cdcdcd"> 
      <mx:Label text="Stack 2" /> 
      <mx:Box backgroundColor="green" width="20" height="20" /> 
     </mx:VBox> 
    </mx:Canvas> 

</mx:WindowedApplication> 

Answer 2

Une chose que vous pouvez essayer est un échange un peu plus avancé dans et hors de la vue. Lorsque le bouton 'switch' est cliqué, effectuez le déplacement et ne faites pas le swap tant que le déplacement n'est pas terminé.

Peut-être quelque chose comme ceci:

private function switchTab():void { 

    var move:Move = new Move(stack.selectedChild as DisplayObject); //not sure about the casting right now...might need to check on that 
    // implement move details here... 

    //closure to make sure the next child is swapped in after the animation completes 
    var done:Function = function(event:Event):void { 
     // do the change here in this closure 
     if (stack.selectedChild == stack1) { 
      stack.selectedChild = stack2; 
     } 
     else { 
      stack.selectedChild = stack1; 
     } 
     // remove the EventListener..don't want memory leaks :) 
     move.removeEventListener(EffectEvent.END, done); 
    } 
    // make sure 'move' performs the 'done' function when the animation finishes 
    move.addEventListener(EffectEvent.END, done); 

    move.play(); 
} 

Answer 3

j'utiliser précise que le contrôle d'affichage actif, puis définir des transitions pour se déplacer entre ces états:

http://livedocs.adobe.com/flex/3/html/help.html?content=transitions_3.html

Answer 4

Ajouter Flou à la réponse acceptée ci-dessus. Rend la transition plus lisse/plus fraîche. J'ai essayé de reproduire les transitions d'état de cet indicateur de vitesse cool Arduino by Mike Chambers, et la réponse par Dan avec un peu de Blur a fait l'affaire.

<!-- Define Transition array with one Transition object.--> 
    <mx:transitions> 
     <!-- A transition for changing from any state to any state. --> 
     <mx:Transition id="myTransition" fromState="*" toState="*"> 
      <mx:Sequence id="s1" targets="{[stack1,stack2]}"> 

       <mx:Blur duration="50" blurXFrom="0.0" blurXTo="5.0" 
         blurYFrom="0.0" blurYTo="5.0"/> 

       <mx:Parallel id="t1" targets="{[stack1,stack2]}"> 
         <mx:Move duration="400"/> 
       </mx:Parallel> 

       <mx:Blur duration="50" blurXFrom="5.0" blurXTo="0.0" 
          blurYFrom="5.0" blurYTo="0.0"/> 
      </mx:Sequence> 

     </mx:Transition> 
    </mx:transitions>