Flex 特效机制

 

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

 

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

 

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

 

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

 

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

Flex 特效机制

下面展示Effect的继承类图

Flex 特效机制

 

*参考资料: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>