flex effect

例子学习网址：http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

UIComponent 是所有组件的父类，定义了组件共有的属性和方法，其中包括行为触发器：

触发器名词	对应的事件名词	事件描述
addedEffect	added	当被添加到容器中时触发
createCompleteEffect	createComplete	当组件完成绘制时触发
removedEffect	removed	当组件从容器中删除时触发
focusInEffect	focusIn	当组件获得焦点时触发
focusOutEffect	focusOut	当组件失去焦点时触发
hideEffect	hide	当组件变成不可见时触发
showEffect	show	当组件变成可见时触发
mouseDownEffect	mouseDown	当鼠标在组件上按下时触发
mouseUpEffect	mouseUp	当鼠标在组件上松开时触发
rollOutEffect	rollOut	当鼠标在组件上移开时触发
rollOverEffect	rollOver	当鼠标移到组件上时触发
moveEffect	move	当组件被移动时触发
resizeEffect	resize	当组件大小改变时触发

所有的动画效果都是Effcet 类的子类，位于 mx.Effects 包中：

Effect 名称	动画效果描述
AnimateProperty	针对组件的一个以数字计算的属性，比如长度， 按给定的起始值逐渐改变属性的大小。
Blur	模糊效果。可以让组件变得模糊，核心由 BlurFilter 滤镜完成。 当对组件使用了该效果，不可再使用 Blur 滤镜和其他模糊效果。
Fade	淡入淡出效果。 注意：当目标对象中包括文字时，必须使用嵌入字体。
Dissolve	溶解效果，主要是在目标对象上增加覆盖层，改变覆盖层的透明度，达到让目标消失或出现的效果。 和 Fade 效果相比，它可以设置覆盖层的颜色。 注意：当目标对象中包括文字时，必须使用嵌入字体。
Glow	发光效果，使用了GlowFilter 滤镜。 当对组件使用了该效果，不可再使用GlowFilter 滤镜和其他发光效果。
Iris	彩虹效果，组件以矩形方式，从中心放大或缩小到中心。 属于遮罩效果。
Move	移动效果，移动组件的坐标，只有当组件位于支持绝对定位的容器中时才有效。
Pause	停止，什么都不改变，没有动画。 一般用于复合动画效果中，用来分割前后两个动画。
Resize	尺寸调整效果，改变组件的长和宽。 当改变组件的长和宽时，处于同一个容器的其他组件的大小也可能会相应改变，如果该容器使用了绝对定位则不会发生这种情况。
Rotate	旋转效果。
SoundEffect	注意：当目标对象中包括文字时，必须使用嵌入字体。
WipeLeft WipeRight WipeUp WipeDown	擦除效果，属于遮罩效果。 对应不同方向。
Zoom	放缩效果，以组件为中心进行放缩。

所有动画对象都继承 Effect 对象。抽象类，定义了以下方法来控制动画的播放流程：

• play(targets:Array = null, playReversedFromEnd:Boolean=false)：开始播放，targets：一组目标对象，这将覆盖原来的目标对象。playReversedFromEnd：是否逆向播放。

• end()：停止播放动画

• pause()：暂停动画

• resume()：当暂停时，继续播放

• reverse()：逆向播放动画，如果动画正在播放，则从当前位置开始逆向播放。
  我们也可以使用AS来完成行为的创建：

列举一个Blur Effect例子

view source

print ?

01	<?xml version="1.0"encoding="utf-8"?>

02	<!-- Simple example to demonstrate the Blur effect. -->

03	<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

04

05	<mx:Blur id="blurImage"duration="1000"

06	blurXFrom="0.0"blurXTo="10.0"

07	blurYFrom="0.0"blurYTo="10.0"/>

08	<mx:Blur id="unblurImage"duration="1000"

09	blurXFrom="10.0"blurXTo="0.0"

10	blurYFrom="10.0"blurYTo="0.0"/>

11

12	<mx:Panel title="Blur Effect Example"width="75%"height="75%"

13	paddingTop="10"paddingLeft="10"paddingRight="10"paddingBottom="10">

14

15	<mx:Text width="100%"color="blue"

16	text="Click and hold the mouse on the p_w_picpath to see blurImage effect. Release the mouse to see the unblurImage effect."/>

17

18	<mx:Image id="flex"source="@Embed(source='assets/Nokia_6630.png')"

19	mouseDownEffect="{blurImage}"

20	mouseUpEffect="{unblurImage}"/>

21

22	</mx:Panel>

23	</mx:Application>

转载于:https://blog.51cto.com/4545079/1324081