Как я могу красиво анимировать между стеками
У меня есть небольшое приложение 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>
У кого-нибудь есть более приятные идеи, чтобы попробовать, быть благодарным за любой ответ?
4 ответа
Решение
Вот именно то, чего я хотел достичь:
<?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>
Я бы использовал состояния, управляющие активным видом, а затем определял переходы для перемещения между этими состояниями:
http://livedocs.adobe.com/flex/3/html/help.html?content=transitions_3.html
Одна вещь, которую вы можете попробовать, это немного более сложный обмен и просмотр. Когда нажата кнопка "переключатель", выполните перемещение и не делайте своп до тех пор, пока движение не будет завершено.
Возможно, что-то вроде этого:
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();
}
Добавьте Blur к принятому ответу выше. Делает переход выглядит более гладким / прохладным.
Я пытался повторить переходы состояний от этого крутого спидометра Arduino Майка Чамберса, и ответ Дэна с добавлением Blur сделал свое дело.
<!-- 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>