如果能在Flex里恰当的使用过渡(Transition),会使应用非常的富有动感。 1.在登陆表格上使用过渡 <?xml version="1.0" encoding="utf-8"?> <!-- transitions/LoginFormTransition.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle"> <mx:Script> <!--[CDATA[ // Import easing classes if you use them only in MXML. import mx.effects.easing.Bounce; ]]--> </mx:Script> <!-- 定义改变状态时的动画效果 --> <mx:transitions> <mx:Transition> <mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}"> <mx:Resize duration="500" easingFunction="Bounce.easeOut"/> <mx:Sequence target="{confirm}"> <mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0"/> <mx:Blur duration="200" blurYFrom="20.0" blurYTo="1"/> </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="{loginButton}" 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" horizontalScrollPolicy="off" verticalScrollPolicy="off"> <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%" id="spacer1"/> <mx:Button label="登录" id="loginButton"/> </mx:ControlBar> </mx:Panel> </mx:Application> 2.使用平行行为效果定义过渡: <?xml version="1.0" encoding="utf-8"?> <!-- transitions/DefiningTrans.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="400" > <mx:states> <mx:State name="One"> <mx:SetProperty target="{p1}" name="x" value="110"/> <mx:SetProperty target="{p1}" name="y" value="0"/> <mx:SetProperty target="{p1}" name="width" value="200"/> <mx:SetProperty target="{p1}" name="height" value="210"/> <mx:SetProperty target="{p2}" name="x" value="0"/> <mx:SetProperty target="{p2}" name="y" value="0"/> <mx:SetProperty target="{p2}" name="width" value="100"/> <mx:SetProperty target="{p2}" name="height" value="100"/> <mx:SetProperty target="{p3}" name="x" value="0"/> <mx:SetProperty target="{p3}" name="y" value="110"/> <mx:SetProperty target="{p3}" name="width" value="100"/> <mx:SetProperty target="{p3}" name="height" value="100"/> </mx:State> <mx:State name="Two"> <mx:SetProperty target="{p2}" name="x" value="110"/> <mx:SetProperty target="{p2}" name="y" value="0"/> <mx:SetProperty target="{p2}" name="width" value="200"/> <mx:SetProperty target="{p2}" name="height" value="210"/> <mx:SetProperty target="{p3}" name="x" value="0"/> <mx:SetProperty target="{p3}" name="y" value="110"/> <mx:SetProperty target="{p3}" name="width" value="100"/> <mx:SetProperty target="{p3}" name="height" value="100"/> </mx:State> </mx:states> <!-- 定义过渡数组--> <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> <!-- Define the Canvas container holding the three Panel containers.--> <mx:Canvas id="pm" width="100%" height="100%" > <mx:Panel id="p1" title="One" x="0" y="0" width="100" height="100" click="currentState='One'" > <mx:Label fontSize="24" text="One"/> </mx:Panel> <mx:Panel id="p2" title="Two" x="0" y="110" width="100" height="100" click="currentState='Two'" > <mx:Label fontSize="24" text="Two"/> </mx:Panel> <mx:Panel id="p3" title="Three" x="110" y="0" width="200" height="210" click="currentState=''" > <mx:Label fontSize="24" text="Three"/> </mx:Panel> </mx:Canvas> </mx:Application> 3.在过渡中使用行为效果: <?xml version="1.0" encoding="utf-8"?> <!-- transitions/ActionTransitions.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" verticalAlign="middle" layout="vertical"> <!-- Define one view state, in addition to the base state.--> <mx:states> <mx:State name="OneOnly"> <mx:SetProperty target="{p2}" name="visible" value="false"/> <mx:SetProperty target="{p2}" name="includeInLayout" value="false"/> </mx:State> </mx:states> <!-- Define Transition array with one Transition object.--> <mx:transitions> <mx:Transition id="toOneOnly" fromState="*" toState="OneOnly"> <mx:Sequence id="t1" targets="{[p2]}"> <mx:Iris showTarget="false" duration="350"/> <mx:SetPropertyAction name="visible"/> <mx:SetPropertyAction target="{p2}" name="includeInLayout"/> </mx:Sequence> </mx:Transition> <mx:Transition id="toAnyFromAny" fromState="*" toState="*"> <mx:Sequence id="t2" targets="{[p2]}"> <mx:SetPropertyAction target="{p2}" name="includeInLayout"/> <mx:SetPropertyAction name="visible"/> <mx:Iris showTarget="true" duration="350"/> </mx:Sequence> </mx:Transition> </mx:transitions> <mx:Panel id="p1" title="面板1" width="200" height="100"> <mx:Label fontSize="24" text="面板1"/> </mx:Panel> <mx:Panel id="p2" title="面板2" width="200" height="100"> <mx:Label fontSize="24" text="面板2"/> </mx:Panel> <mx:Button id="b1" label="改变状态" click="currentState = currentState == 'OneOnly' ? '' : 'OneOnly';"/> </mx:Application> 4.过滤过渡: <?xml version="1.0" encoding="utf-8"?> <!-- transitions/FilterShowHide.mxml --> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" width="700" > <!-- 定义两个视窗状态。--> <mx:states> <mx:State name="Two"> <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="Three"> <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="x" value="0"/> <mx:SetProperty target="{p3}" name="y" value="0"/> </mx:State> </mx:states> <!-- 定义一个单一的效果应用在所有的状态改变中。--> <mx:transitions> <mx:Transition fromState="*" toState="*"> <mx:Sequence targets="{[p1,p2,p3]}"> <mx:Sequence id="sequence1" filter="hide" > <mx:WipeUp/> <mx:SetPropertyAction name="visible" value="false"/> </mx:Sequence> <mx:Move filter="move"/> <mx:Sequence id="sequence2" filter="show" > <mx:SetPropertyAction name="visible" value="true"/> <mx:WipeUp/> </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='Two'" > <mx:Label fontSize="24" text="Two"/> </mx:Panel> <mx:Panel id="p3" title="Three" visible="false" width="100" height="100" click="currentState='Three'" > <mx:Label fontSize="24" text="Three"/> </mx:Panel> </mx:Canvas> </mx:Application>