Flex4之控制状态转换以及产生动画特效【登录示例】
话不多说，Flex4的动画效果的确让人赏心悦目，既然是登陆肯定有画面之间的转化，那么在Flex中，这就叫做不同状态之间的变换，本实例中我做的是登陆验证，如果登录失败，则登陆框会出现左右抖动现象，用过MAC电脑的应该知道有这个效果，如果登录成功则出现画面消失，和主页面不同部分从不同方向显示到一起的动画特效
特上全部mxml代码
?
?
<?xml version="1.0" encoding="utf-8"?><s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600" currentState="loginState"><fx:Declarations><!-- 将非可视元素（例如服务、值对象）放在此处 --><s:Sequence id="shake" target="{login}"><s:Move xBy="20" duration="40" /><s:Move xBy="-20" duration="40"/><s:Move xBy="20" duration="40"/><s:Move xBy="-20" duration="40"/><s:Move xBy="20" duration="40"/><s:Move xBy="-20" duration="40"/><s:Move xBy="20" duration="40"/><s:Move xBy="-20" duration="40"/></s:Sequence></fx:Declarations><fx:Script><![CDATA[function checkLogin():void{ //判断登录是否成功，如果成功就会执行到主页面，在这个过程中会有特效发生、如果登录失败会发生左右抖动现象 if(userName.text=='flex'&&passWord.text=='jay'){ currentState='mainState'; }else{ shake.play(); }}]]></fx:Script><s:states><s:State name="mainState"/><s:State name="loginState"/></s:states><s:transitions><!-- 从loginState到mainState所发生的特效变化，在本实例中就是登录成功后所发生的特效 --><s:Transition fromState="loginState" toState="mainState"><!--可以添加一个序列，用来执行多个特效变化 --><s:Sequence><!--第一步使login面板消失 --><s:Parallel><s:Fade target="{login}" /></s:Parallel><!--不仅要消失还要移除 --> <s:RemoveAction target="{login}" /><!--添加主页面的三项类容，然后逐一从不同方向显示进来 --><s:Parallel targets="{[myImg,viewImg,myblog]}"><s:AddAction /><s:Fade /> <s:Move target="{myImg}" xFrom="-100"/><s:Move target="{viewImg}" yFrom="-100"/><s:Move target="{myblog}" xFrom="500"/><s:Resize target="{myblog}" widthFrom="456" widthTo="556" /></s:Parallel></s:Sequence></s:Transition><!--从mainState到mainState所发生的特效变化,在本实例中就是点击注销按钮所发发生的特效 --><s:Transition fromState="mainState" toState="loginState"><s:Sequence><!--使主页面各项全部消失 --><s:Parallel ><s:Fade targets="{[myImg,viewImg,myblog]}" /></s:Parallel ><!--消失后接着移除--><s:RemoveAction targets="{[myImg,viewImg,myblog]}" /><!--添加登录然后从右边向左边方向逐渐显示出来 --><s:Parallel target="{login}"><s:AddAction /><s:Fade /><s:Move xFrom="100" /> </s:Parallel></s:Sequence></s:Transition></s:transitions><s:Panel id="login" title="登录窗口" x="27" y="40" width="250" height="200" includeIn="loginState"><s:Label x="22" y="32" text="用户名：" /><s:TextInput x="74" y="27" id="userName"/><s:Label x="22" y="73" text="密码："/><s:TextInput x="74" y="68" id="passWord"/><s:Button x="74" y="107" id="loginBtn" label="登录" click="checkLogin()"/></s:Panel><s:Label text="请登录用户" fontSize.mainState="20" color.mainState="#D71B1B" x.mainState="22" y.mainState="10" text.mainState="欢迎你的到来" x.loginState="27" y.loginState="10" fontSize.loginState="20" fontWeight.loginState="normal" color.loginState="#9A0707"/><s:Button excludeFrom="loginState" x="875" y="569" label="注销" click="currentState='loginState'"/><s:Panel id="myblog" title="我的博客" includeIn="mainState" x="378" y="230" width="556" height="291"><s:Label x="5" y="11" text="周杰伦的迷你小博客--畅想移动生活" fontWeight="bold" fontSize="25" color="#1A1FD8" chromeColor="#CCCCCC"/></s:Panel><mx:Image includeIn="mainState" x="10" y="38" source="img/imgget.q (9).jpg" id="myImg" width="326" height="483"/><mx:Image includeIn="mainState" x="378" y="13" source="img/068aac39fd3c5401b8998fd2.jpg" width="556" height="209" id="viewImg"/></s:Application> ?