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=='1'&&passWord.text=='1'){
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,myblog]}" ?/>
</s:Parallel >
<!--消失后接着移除-->
<s:RemoveAction targets="{[myImg,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="lx2.jpg" id="myImg" width="326" height="483"/>
<mx:Image includeIn="mainState" x="378" y="13" source="lx2.jpg" width="556" height="209" id="viewImg"/>

</s:Application>

转自:http://www.voidcn.com/article/p-smhjjinb-bqw.html