flex Transition

Transition 类常用的属性
fromState:String 表示开始进行过渡的状态，默认值为"*",代表任何一种视图状态
toState:String   表示结束进行的视图状态，默认值为"*" ,代表任何一种视图状态
effect : IEffect     应用过渡时要播放的 IEffect 对象。

1.定义多个过渡效果(注意需要定义多个Transition必须在 <mx:transitions>节点中而且 <mx:transitions>节点只能出现一次)
<mx:transitions>
<mx:Transition id="tran1" fromState="*" toState="demo2" />
<mx:Transition id="tran2" fromState="*" toState="*" />
<mx:transitions>

2.定义目标效果
例如：其中 Parallel 同时播放多个子效果。
  

 
<mx:transitions>
	<mx:Transition id="myTransition" fromState="*" toState="*">
		<mx:Parallel id="t1" targets="{[p1,p2,p3]}" >
			<mx:Move duration="400" />
			<mx:Resize duration="400" />
		</mx:Parallel >	
	</mx:Transition>
    </mx:transitions>

3.在过渡中控制行为效果
//要定义过渡，可将应用程序的过渡属性设置为 Transition 对象的数组。
过度中的行为效果
行为效果 对应的视图状态 使用
SetPropertyAction SetProperty 设定属性值为过渡中的一部分
SetStyleAction SetStyle 设定样式为过渡样式的一部分
AddChildAction AddChild 增加子类为过渡的一部分
RemoveChildAction RemoveChild 删除子类为过渡的一部分
例如:

<mx:states>
	<mx:State name="state1">
		<mx:SetProperty target="{P2}" name="visible" value="false" />
		<mx:SetProperty target="{P2}" name="title" value="asdfasdf" />
	</mx:State>
</mx:states>

// 定义myTransition1的过渡应用从基础状态改变到 myTransition2 状态

<mx:Transition id="myTransition1" fromState="*" toState="myTransition2">
	<mx:Parallel id="t1" targets="{[p1,p2,p3]}" >
		<mx:Move duration="400" />
		<mx:Resize duration="400" />
	</mx:Parallel >	
</mx:Transition>

// 定义 myTransition2 的过渡应用从基础状态改变基础状态

<mx:Transition id="myTransition2" fromState="*" toState="*">
	<mx:Parallel id="t1" targets="{[p1,p2,p3]}" >
		<mx:Move duration="400" />
		<mx:Resize duration="400" />
	</mx:Parallel >	
</mx:Transition>

4.过滤过渡效果使用(Filtering )
在默认情况下,flex的应用一个过渡中的效果到所有组件上,如果需要限制效果应用在所有的目标组件上
只能用对应在目标组件上，则需要使用过滤(Filtering)
Filtering 可能的值有
add 在视图状态改变的过程中,在使用增加子类上显示的效果
hide 在视图状态改变的过程中,在使用子类 visible 属性从true,改变到false时显示的效果
move 在视图状态改变的过程中,在使用子类x和y属性改变是显示的效果
remove 在视图状态改变的过程中,在使用删除子类
resize 在视图状态改变的过程中,在使用子类width和height属性改变时显示的效果
show 在视图状态改变的过程中,在使用子类 visible 属性从false,改变到true时显示的效果

   <mx:states>
		  <mx:State name="state2">
			<mx:SetProperty target="{p1}" name="visible" value="false" />
			<mx:SetProperty target="{p2}" name="visible" value="true" />
			<mx:SetProperty target="{p3}" name="visible" value="true" />

			<mx:SetProperty target="{p2}" name="x" value="0" />
			<mx:SetProperty target="{p2}" name="y" value="0" />
			<mx:SetProperty target="{p3}" name="x" value="0" />
			<mx:SetProperty target="{p3}" name="y" value="110" />
		 </mx:State>
		<mx:State name="state3">
			<mx:SetProperty target="{p1}" name="visible" value="true" />
			<mx:SetProperty target="{p2}" name="visible" value="false" />
			<mx:SetProperty target="{p3}" name="visible" value="true" />

			<mx:SetProperty target="{p1}" name="x" value="0" />
			<mx:SetProperty target="{p1}" name="y" value="110" />
			<mx:SetProperty target="{p3}" name="width" value="0" />
			<mx:SetProperty target="{p3}" name="height" value="0" />
		 </mx:State >
    </mx:states>


    <mx:transitions>
	<mx:Transition id="myTransition" fromState="*" toState="*">
		<mx:Sequence id="sequ1" targets="{[p1,p2,p3]}" >
			<mx:Sequence id="sequ2" filter="hide">
			<mx:WipeUp />
			<mx:SetPropertyAction name="visible" value="false" />
			</mx:Sequence >
			<mx:Move filter="move" />
			<mx:Sequence id="sequ3" filter="show">
			<mx:WipeUp />
			<mx:SetPropertyAction name="visible" value="true" />
			</mx:Sequence >
 		</mx:Sequence>
	</mx:Transition>
    </mx:transitions>
    
    <mx:Canvas id="pm" width="100%" height="100%" >
	<mx:Panel id="p1" title="one" x="0" y="0" width="100" height="100" click="{currentState=''}"  >
		<mx:Label fontSize="24" text="One" />
	</mx:Panel>
	<mx:Panel id="p2" title="Two" x="0" y="110" width="100" height="100" click="{currentState='state2'}"  >
		<mx:Label fontSize="24" text="two" />
	</mx:Panel>
	<mx:Panel id="p3" title="Two" x="110" y="0" width="200" height="210" visible="false" click="{currentState=''}"  >
		<mx:Label fontSize="24" text="three" />
	</mx:Panel>
    </mx:Canvas>

--登录的效果
  

 <?xml version="1.0"?>
<!-- Simple example to demonstrate the Repeater class. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
        
            import mx.effects.easing.Bounce;
  
        ]]>
    </mx:Script>
    <mx:transitions>
	<mx:Transition>
			<mx:Parallel targets="{[LoginPanel,registerLink,loginBtn,confirm]}" >
				<mx:Resize duration="500" easingFunction="{Bounce.easeOut}" />
				<mx:Sequence target="{confirm}" >
					<mx:Blur duration="200" blurYForm="1.0" blurYTo="20.0" />
					<mx:Blur duration="200" blurYForm="20.0" blurYTo="1.0" />
				</mx:Sequence>
			</mx:Parallel>
	</mx:Transition>
    </mx:transitions>
    <mx:states>
	    <mx:State name="Register">
		<mx:AddChild relativeTo="{loginForm}" position="lastChild" > 
			<mx:FormItem id="confirm" label="确认:">
				<mx:TextInput/>
			</mx:FormItem>
		</mx:AddChild>
		<mx:SetProperty target="{loginPanel}" name="title" value="注册" />
		<mx:SetProperty target="{loginBtn}" name="label" value="注册" />
		<mx:RemoveChild target="{registerLink}" />
		<mx:AddChild relativeTo="{spacer1}" position="before" > 
			<mx:LinkButton label="回到登录页面" click="{currentState=''}" />
		</mx:AddChild>
	    </mx:State>
    </mx:states>
    <mx:Panel title="登录" id="LoginPanel" >
    <mx:Form id="loginForm">
	<mx:FormItem  label="用户名:">
				<mx:TextInput/>
	</mx:FormItem>
	<mx:FormItem  label="密码:">
				<mx:TextInput/>
	</mx:FormItem>
    </mx:Form >
    <mx:ControlBar>
    	<mx:LinkButton id="registerLink " label="注册" click="{currentState='Register'}" />
	<mx:Spacer width="100" />
	<mx:Button label="登录" id="loginBtn" />
    </mx:ControlBar>
        </mx:Panel >
</mx:Application>