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标签分别实现自上往下和自下往上隐藏或显示组件的效果