Flex 特效机制

 

Flex的动画效果由一个工厂类（Factory）和一个实例类（Instance）构成。

 

• 工厂类用来处理事件、控制动画，它的名称就是效果的名称，如Zoom。
• 实例类则用来实现动画效果，如ZoomInstance。

 

通常我们在应用程序中创建一个工厂类的实例，设置必要的参数，然后将该实例与触发器关联。当触发器被触发或调用play()方法时，实例去播放所需效果，执行结束后，该实例会被销毁，如果一个效果对应多个目标对象，每一个目标对象都会有一个自己的实例。

 

实例类的命名规则为效果名+Instance。如之前定义的工厂类名为Zoom，那么实例类名就是ZoomInstance。Effect的这种机制，是设计模式中工厂模式的一种应用，效果执行的时候，运行的不是Zoom，而是ZoomInstance。

 

下面分别表现了工厂类和实例类的层级关系。

下面展示Effect的继承类图

 

*参考资料：http://developer.51cto.com/art/201008/216791.htm

 Mxml 和AS 代码设置特效

<?xml version="1.0"?>
<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"
			   initialize="application1_initializeHandler(event)">
	<fx:Script>
		<![CDATA[
			import mx.effects.WipeUp;
			import mx.events.FlexEvent;
			private var wipedown:WipeDown;
			private var wipein:WipeUp;
			protected function application1_initializeHandler(event:FlexEvent):void
			{
				wipedown = new WipeDown();
				wipedown.duration = 1000;
				
				wipein = new WipeUp();
				wipein.duration = 1000;
				wipein.target = testImg;
				
				testImg.setStyle("showEffect", wipedown);
				testImg.setStyle("hideEffect", wipein);
			}
		]]>
	</fx:Script>
	<fx:Declarations>
		<mx:WipeDown id="wipeOut" duration="1000"/>
		<mx:WipeDown id="wipeIn" duration="1000" />
	</fx:Declarations>
	<s:Panel title="WipeDown Effect Example" width="95%" height="95%" >
		<s:VGroup left="20" right="20" top="20" bottom="20">
			<s:HGroup>
				<mx:Image source="@Embed(source='resource/1.jpg')"
						  visible="{cb1.selected}"
						  hideEffect="{wipeOut}" showEffect="{wipeIn}"/>
				<mx:Image source="@Embed(source='resource/1.jpg')"
						  id="testImg"  visible="{cb1.selected}"/>
			</s:HGroup>
		<s:CheckBox id="cb1" label="visible" selected="true" />
		</s:VGroup>
	</s:Panel>
</s:Application>