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>

 

评论

8 楼 lifengshurui 2011-09-01  

谢谢您的分享！

7 楼 红耳0414 2011-08-02  

TAI NB

6 楼 JavaCrazyer 2011-01-12  

macleo 写道

帅呆了......

5 楼 macleo 2011-01-04  

帅呆了......

4 楼 htj1231825 2010-12-09  

在 XML 处理指令 (<? ... ?>) 之前不能留有空白。
  这个么办。。。。

3 楼 bence 2010-10-18  

直接copy下来。运行不了，mark下

2 楼 JavaCrazyer 2010-08-16  

JiongBull 写道

呵呵,刚好在学,看到了你的代码和注释.谢谢分享.

不客气

1 楼 JiongBull 2010-08-15  

呵呵,刚好在学,看到了你的代码和注释.谢谢分享.