我怎么能很好地viewstacks间动画 [英] How can I nicely animate between viewstacks

问题描述

我有一个小的Adobe AIR应用程序，我想有几个在它的意见。我可以用一个ViewStack的实现这些意见，但我很难找到一个很好的方式，它们之间设置动画。

I have a little Adobe Air app and I want to have several 'views' within it. I can achieve these views using a ViewStack but am having difficulty finding a nice way to animate between them.

这是我曾尝试，虽然它的工作原理，有一种观点滑入视图时，我要的是更喜欢DestroyTwitter的应用程序，其视图和所有控件很好地滑出的观点之前就消失了：

This is what I have tried and although it works, one view disappears before sliding into view when what I want is more like the DestroyTwitter app where the view and all controls slide out of view nicely:

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

有没有人有任何更好的想法去尝试，感谢任何反应？

Has anyone got any nicer ideas to try, be grateful for any response?

推荐答案

下面是正是我想要实现的：

Here is exactly what i wanted to achieve:

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

这篇关于我怎么能很好地viewstacks间动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！