Flex4之動畫效果---上下，左右擦掉效果

首先介紹從左到右的效果，這個是屬于FLEX4的effects動畫效果。

使圖像從左到右隐藏效果，呵呵，不用多說，貼上代碼：

<?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<mx:Script>
		<!--[CDATA[
			private function changeEffect(eventObj:Event):void {
				if (myButton.getStyle("mouseUpEffect") == myWR) {
					myButton.setStyle("mouseUpEffect", myWL);
				}
				else if (myButton.getStyle("mouseUpEffect") == myWL) {
					myButton.setStyle("mouseUpEffect", myWR);
				}
			}
		]]-->
	</mx:Script>
           

<fx:Declarations>
	<!--定義左右兩個方向的擦去效果-->
	   <mx:WipeRight id="myWR" duration="1000"/>
	   <mx:WipeLeft id="myWL" duration="1000"/>
           

</fx:Declarations>
	
	<mx:Panel title="交換使用不同的行為效果" width="95%" height="95%" 
        horizontalAlign="center" verticalAlign="middle">
		<mx:Button id="myButton" label="按鈕"
			width="150" height="80"
			mouseUpEffect="{myWL}"
			click="changeEffect(event);"/>
	</mx:Panel>
	
</mx:Application>
           

下面我在介紹上下擦掉效果：

代碼如下所示：

<?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">
	<s:layout>
		<s:BasicLayout/>
	</s:layout>
	<fx:Declarations>
		
		<!-- 将非可視元素（例如服務、值對象）放在此處 -->
		
		
		<mx:WipeUp id="wipeOut" duration="1000"/>
		<mx:WipeUp id="wipeIn" duration="1000"/>
	</fx:Declarations>

	
	<mx:Panel title="向上擦掉效果示例" width="95%" height="95%" 
			  paddingTop="5" paddingLeft="10" paddingRight="10" paddingBottom="5">
		
		<mx:Text width="100%" color="blue" 
				 text="使用向上擦掉的效果來顯示或者隐藏圖檔。"/>
		
		<!-- 給目标元件賦予效果 -->
		<mx:Image source="@Embed(source='http_imgload.jpg')" 
				  visible="{cb1.selected}"
				  hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
		
		<mx:CheckBox id="cb1" label="可視" selected="true"/>
		
	</mx:Panel>
	
</s:Application>

           

其中： <mx:WiperUP><mx:WipeDown><mx:WipeLeft><mx:WipeRight>都處在,<fx:Declaration>中。

mx:WipeRight和mx:WipeLeft标簽分别實作自左往右和自右往左隐藏或顯示元件的效果

mx:WipeUp和mx:WipeDown标簽分别實作自上往下和自下往上隐藏或顯示元件的效果