FLEX 特效

一、简介：

flex特效是ria应用程序的rich的重要组成部分。

EffectManager类管理所有的特效实例以避免不必要的定时器和方法调用造成的内内存使用过大。一个效果由两部分组成：一是效果的EffectInstance,它包含了效果的基本信息，标识出要执行什么，怎么执行，是移动还是渐变等。二是Effect类，它在此扮演工厂的角色，来控制效果的执行等，如何时执行、何时删除等。

二、播放步骤：

一个效果的播放共有四个步骤。

1）为每一个目标组件创建一个EffectInstance实例。如果一个效果的目标组件是多个的话，就创建多个EffectInstance实例。

2） 框架从工厂对象里复制所有的配置信息到每一个EffectInstance实例。包括执行时间、重复次数等信息。

3） 效果在对象上使用第一步创建的EffectInstance实例对象播放。

4） 播放结束，框架、EffectManager类将删除播放完的实例对象。

三、常见效果类：

AnimateProperty:动画属性
      Blur ：模糊
      Desolve ：溶解
      Fade ：凋零
      Glow ：发光
      Iris ：瞳孔放大缩小
      Move ：移动
      Pause ：定格
      Resize ：改变大小
      Rotate ：旋转
      SoundEffect ：音效
      (WipeLeft, WipeRight, WipeUp, WipeDown) ：擦拭
      Zoom ：放大缩小

Sequence:顺序播放组合

Parallel：同时播放组合

四、常见触发动画效果方式：

AddedEffect ：加入容器
      creationCompleteEffect ：创建完成
      focusInEffect ：获得键盘输入
      focusOutEffect ：失去键盘输入
      hideEffect ：visable属性设置为false
      mouseDownEffect ：鼠标按下
      mouseUpEffect ：鼠标按起
      moveEffect ：被拖动
      resizeEffect ：重新设定大小
      removedEffect ：被移除
      rollOutEffect ：鼠标移到控件外
      rollOverEffect ：鼠标移到控件上
      showEffect ：visable属性设置为true

五、部分示例：

1：glow(发光)

代码：

<mx:Glow id="glow" duration="1000"

alphaFrom="0.6" alphaTo="0.2"

blurXFrom="0.0" blurXTo="50.0"

blurYFrom="0.0" blurYTo="50.0"

color="0xffffff"/>

duratuion 是特效的时间 1000 毫秒

alphaFrom 是透明度从 0.6 开始

alphaTo 是透明度到 0.2

blurXFrom 是X放向的模糊开始位置(相对于控件的)

blurXTo 是X放向的模糊结束位置(相对于控件的)

blurYFrom 是Y放向的模糊开始位置(相对于控件的)

blurYTo 是Y放向的模糊结束位置(相对于控件的)

color 是发光的颜色

2：Sequence (顺序) Bounce(弹跳)

代码：

import mx.effects.easing.*;

<mx:Sequence id="movePauseMove">

<mx:Move yBy="-150" duration="1000" easingFunction="Bounce.easeOut"/>

<mx:Move yBy="150" duration="1000" easingFunction="Bounce.easeIn"/>

</mx:Sequence>

yBy 是作用在Y方向。

duratuion 是特效的时间 1000 毫秒

easingFunction 是松开动作

Bounce.easeOut 是跳出的动作

Bounce.easeIn 是跳回的动作

作用到控件：

<mx:Image source="../assets/zh_cn_ptn_090722.png"

mouseDownEffect="{movePauseMove}"

id="image4"/>

六、自定义效果：

每个效果都是由两个元素组成的，分别是EffectInstance效果实例与Effect类工厂。所以在自定义效果的时候，也要成对的创建这两个类的子类，并分别继承自EffectInstance类和Effect类。如：

view plaincopy to clipboardprint?

1. public class TestEffect extends Effect
2. {
3. public var alp:Number;
4. public var col:uint;
5. public function TestEffect(target:Object=null)
6. {
7. super(target);
8. instanceClass = TestInstance;
9. }
10. override protected function initInstance(instance:IEffectInstance):void{
11. super.initInstance(instance);
12. TestInstance(instance).col = this.col;
13. TestInstance(instance).alp = this.alp;
14. }
15. }
16. public class TestInstance extends EffectInstance
17. {
18. public var alp:Number;
19. public var col:uint;
20. public function TestInstance(target:Object)
21. {
22. super(target);
23. }
24. override public function play():void{
25. super.play();
26. (target as DisplayObject).alpha = this.alp;
27. var shape:FlexShape = new FlexShape();
28. shape.graphics.beginFill(col,1.0);
29. shape.graphics.drawRect(0,0,(target as DisplayObject).width,(target as DisplayObject).height);
30. shape.graphics.endFill();
31. var uiComp:UIComponent = new UIComponent();
32. uiComp.addChild(shape);
33. UIComponent(target).addChild(uiComp);
34. }
35. }

public class TestEffect extends Effect
{
public var alp:Number;
public var col:uint;
public function TestEffect(target:Object=null)
{
super(target);
instanceClass = TestInstance;
}

override protected function initInstance(instance:IEffectInstance):void{
super.initInstance(instance);
TestInstance(instance).col = this.col;
TestInstance(instance).alp = this.alp;
}
}

public class TestInstance extends EffectInstance
{

public var alp:Number;
public var col:uint;

public function TestInstance(target:Object)
{
super(target);
}

override public function play():void{
super.play();
(target as DisplayObject).alpha = this.alp;
var shape:FlexShape = new FlexShape();
shape.graphics.beginFill(col,1.0);
shape.graphics.drawRect(0,0,(target as DisplayObject).width,(target as DisplayObject).height);
shape.graphics.endFill();
var uiComp:UIComponent = new UIComponent();
uiComp.addChild(shape);
UIComponent(target).addChild(uiComp);
}
}

七、其它：

1）当想手动播放某效果时，调用效果实例的play方法即可，为了稳定，一般在调用play方法前先调用一下end,来保证先前效果已结束。

2） 当给对象添加触发效果方式时：uicompnent.setStyle("触发方式",特效对象);

3）运用组合效果(Sequence与Parallel)时，调用该效果的addChild方法即可，将子效果添加的组合效果对象中。如：

Sequence.addChild(move);
             Sequence.addChild(glow);