sagittar
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 删除子类为过渡的一部分
  • 例如：
    1. <mx:states>   
    2.     <mx:State name="state1">   
    3.         <mx:SetProperty target="{P2}" name="visible" value="false" />   
    4.         <mx:SetProperty target="{P2}" name="title" value="asdfasdf" />   
    5.     </mx:State>   
    6. </mx:states>  

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

As代码 复制代码 收藏代码
  1. <mx:Transition id="myTransition2" fromState="*" toState="*">   
  2.     <mx:Parallel id="t1" targets="{[p1,p2,p3]}" >   
  3.         <mx:Move duration="400" />   
  4.         <mx:Resize duration="400" />   
  5.     </mx:Parallel >      
  6. </mx:Transition>  
<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时显示的效果

As代码 复制代码 收藏代码
  1.   <mx:states>   
  2.       <mx:State name="state2">   
  3.         <mx:SetProperty target="{p1}" name="visible" value="false" />   
  4.         <mx:SetProperty target="{p2}" name="visible" value="true" />   
  5.         <mx:SetProperty target="{p3}" name="visible" value="true" />   
  6.   
  7.         <mx:SetProperty target="{p2}" name="x" value="0" />   
  8.         <mx:SetProperty target="{p2}" name="y" value="0" />   
  9.         <mx:SetProperty target="{p3}" name="x" value="0" />   
  10.         <mx:SetProperty target="{p3}" name="y" value="110" />   
  11.      </mx:State>   
  12.     <mx:State name="state3">   
  13.         <mx:SetProperty target="{p1}" name="visible" value="true" />   
  14.         <mx:SetProperty target="{p2}" name="visible" value="false" />   
  15.         <mx:SetProperty target="{p3}" name="visible" value="true" />   
  16.   
  17.         <mx:SetProperty target="{p1}" name="x" value="0" />   
  18.         <mx:SetProperty target="{p1}" name="y" value="110" />   
  19.         <mx:SetProperty target="{p3}" name="width" value="0" />   
  20.         <mx:SetProperty target="{p3}" name="height" value="0" />   
  21.      </mx:State >   
  22.    </mx:states>   
  23.   
  24.   
  25.    <mx:transitions>   
  26. <mx:Transition id="myTransition" fromState="*" toState="*">   
  27.     <mx:Sequence id="sequ1" targets="{[p1,p2,p3]}" >   
  28.         <mx:Sequence id="sequ2" filter="hide">   
  29.         <mx:WipeUp />   
  30.         <mx:SetPropertyAction name="visible" value="false" />   
  31.         </mx:Sequence >   
  32.         <mx:Move filter="move" />   
  33.         <mx:Sequence id="sequ3" filter="show">   
  34.         <mx:WipeUp />   
  35.         <mx:SetPropertyAction name="visible" value="true" />   
  36.         </mx:Sequence >   
  37.         </mx:Sequence>   
  38. </mx:Transition>   
  39.    </mx:transitions>   
  40.       
  41.    <mx:Canvas id="pm" width="100%" height="100%" >   
  42. <mx:Panel id="p1" title="one" x="0" y="0" width="100" height="100" click="{currentState=''}"  >   
  43.     <mx:Label fontSize="24" text="One" />   
  44. </mx:Panel>   
  45. <mx:Panel id="p2" title="Two" x="0" y="110" width="100" height="100" click="{currentState='state2'}"  >   
  46.     <mx:Label fontSize="24" text="two" />   
  47. </mx:Panel>   
  48. <mx:Panel id="p3" title="Two" x="110" y="0" width="200" height="210" visible="false" click="{currentState=''}"  >   
  49.     <mx:Label fontSize="24" text="three" />   
  50. </mx:Panel>   
  51.    </mx:Canvas>  
   <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>


--登录的效果
  

As代码 复制代码 收藏代码
    1.  <?xml version="1.0"?>   
    2. <!-- Simple example to demonstrate the Repeater class. -->   
    3. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">   
    4.   
    5.     <mx:Script>   
    6.         <![CDATA[   
    7.            
    8.             import mx.effects.easing.Bounce;   
    9.      
    10.         ]]>   
    11.     </mx:Script>   
    12.     <mx:transitions>   
    13.     <mx:Transition>   
    14.             <mx:Parallel targets="{[LoginPanel,registerLink,loginBtn,confirm]}" >   
    15.                 <mx:Resize duration="500" easingFunction="{Bounce.easeOut}" />   
    16.                 <mx:Sequence target="{confirm}" >   
    17.                     <mx:Blur duration="200" blurYForm="1.0" blurYTo="20.0" />   
    18.                     <mx:Blur duration="200" blurYForm="20.0" blurYTo="1.0" />   
    19.                 </mx:Sequence>   
    20.             </mx:Parallel>   
    21.     </mx:Transition>   
    22.     </mx:transitions>   
    23.     <mx:states>   
    24.         <mx:State name="Register">   
    25.         <mx:AddChild relativeTo="{loginForm}" position="lastChild" >    
    26.             <mx:FormItem id="confirm" label="确认:">   
    27.                 <mx:TextInput/>   
    28.             </mx:FormItem>   
    29.         </mx:AddChild>   
    30.         <mx:SetProperty target="{loginPanel}" name="title" value="注册" />   
    31.         <mx:SetProperty target="{loginBtn}" name="label" value="注册" />   
    32.         <mx:RemoveChild target="{registerLink}" />   
    33.         <mx:AddChild relativeTo="{spacer1}" position="before" >    
    34.             <mx:LinkButton label="回到登录页面" click="{currentState=''}" />   
    35.         </mx:AddChild>   
    36.         </mx:State>   
    37.     </mx:states>   
    38.     <mx:Panel title="登录" id="LoginPanel" >   
    39.     <mx:Form id="loginForm">   
    40.     <mx:FormItem  label="用户名:">   
    41.                 <mx:TextInput/>   
    42.     </mx:FormItem>   
    43.     <mx:FormItem  label="密码:">   
    44.                 <mx:TextInput/>   
    45.     </mx:FormItem>   
    46.     </mx:Form >   
    47.     <mx:ControlBar>   
    48.         <mx:LinkButton id="registerLink " label="注册" click="{currentState='Register'}" />   
    49.     <mx:Spacer width="100" />   
    50.     <mx:Button label="登录" id="loginBtn" />   
    51.     </mx:ControlBar>   
    52.         </mx:Panel >   
    53. </mx:Application> 

 

posted on 2012-10-16 14:41  sagittar  阅读(303)  评论(0)    收藏  举报

博客园  ©  2004-2026
浙公网安备 33010602011771号 浙ICP备2021040463号-3 Powered By博客园