viewstack 사이에 멋지게 애니메이션을 적용하려면 어떻게해야합니까?

Question

Adobe Air 앱이 약간 있고 그 안에 여러 개의 '보기'가 있습니다. ViewStack을 사용하여 이러한 뷰를 구현할 수 있지만 그 사이에 애니메이션을 적용하는 좋은 방법을 찾는 데 어려움이 있습니다.

이

내가 시도 무엇이며 어떻게 작동하지만, 하나의보기는 내가 원하는 것은 더보기 및 모든 컨트롤이 잘보기 밖으로 밀어 DestroyTwitter 응용 프로그램 같은 경우보기에 슬라이딩 전에 사라 :

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

누구나 시도해 보시고 더 좋은 아이디어가 있으십니까?

Answer 1

가 정확히 달성하고자하는 것 :

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

시도해 볼 수있는 한 가지 방법은 좀 더 고급 스와핑보기 전환입니다. '스위치'버튼을 클릭하면 이동을 수행하고 이동이 끝날 때까지 스왑을 수행하지 마십시오.

이 같은

아마 뭔가 :

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

내가보기 활성화를 제어 상태를 사용하고 그 상태 간 이동 전환을 정의하는 것 :

여기

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

Answer 4

위의 허용 된 대답에 흐리게 표시합니다. 전환을 부드럽게 보입니다.

이 멋진 아두 이노 속도계 by Mike Chambers에서 상태 전환을 복제하려고했는데 Dan의 대답에 약간의 블러가 추가되어 트릭을 만들었습니다.

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