FLEX 特效

1、簡介：

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

      EffectManager類管理全部的特效實例以免沒必要要的定時器和方法調用形成的內內存使用過大。一個效果由兩部分組成：一是效果的EffectInstance,它包含了效果的基本信息，標識出要執行什麼，怎麼執行，是移動仍是漸變等。二是Effect類，它在此扮演工廠的角色，來控制效果的執行等，如什麼時候執行、什麼時候刪除等。

 

2、播放步驟：

      一個效果的播放共有四個步驟。

      1）爲每個目標組件建立一個EffectInstance實例。若是一個效果的目標組件是多個的話，就建立多個EffectInstance實例。

      2） 框架從工廠對象裏複製全部的配置信息到每個EffectInstance實例。包括執行時間、重複次數等信息。

      3） 效果在對象上使用第一步建立的EffectInstance實例對象播放。

      4） 播放結束，框架、EffectManager類將刪除播放完的實例對象。

 

3、常見效果類：

      AnimateProperty:動畫屬性
      Blur ：模糊
      Desolve ：溶解
      Fade ：凋零
      Glow ：發光
      Iris ：瞳孔放大縮小
      Move ：移動
      Pause ：定格
      Resize ：改變大小
      Rotate ：旋轉
      SoundEffect ：音效
      (WipeLeft, WipeRight, WipeUp, WipeDown) ：擦拭
      Zoom ：放大縮小

      Sequence:順序播放組合

      Parallel：同時播放組合

4、常見觸發動畫效果方式：

      AddedEffect ：加入容器
      creationCompleteEffect ：建立完成
      focusInEffect ：得到鍵盤輸入
      focusOutEffect ：失去鍵盤輸入
      hideEffect ：visable屬性設置爲false
      mouseDownEffect ：鼠標按下
      mouseUpEffect ：鼠標按起
      moveEffect ：被拖動
      resizeEffect ：從新設定大小
      removedEffect ：被移除
      rollOutEffect ：鼠標移到控件外
      rollOverEffect ：鼠標移到控件上
      showEffect ：visable屬性設置爲true

 

5、部分示例：

     

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"/>

 

6、自定義效果：

      每一個效果都是由兩個元素組成的，分別是EffectInstance效果實例與Effect類工廠。因此在自定義效果的時候，也要成對的建立這兩個類的子類，並分別繼承自EffectInstance類和Effect類。如：

 

view plain copy to clipboard print ?

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.           
11.         override protected function initInstance(instance:IEffectInstance):void{  
12.             super.initInstance(instance);  
13.             TestInstance(instance).col = this.col;  
14.             TestInstance(instance).alp = this.alp;  
15.         }  
16.     }  
17.   
18.   
19.   
20. public class TestInstance extends EffectInstance  
21.     {  
22.           
23.         public var alp:Number;  
24.         public var col:uint;  
25.           
26.         public function TestInstance(target:Object)  
27.         {  
28.             super(target);  
29.         }  
30.           
31.         override public function play():void{  
32.             super.play();  
33.             (target as DisplayObject).alpha = this.alp;  
34.             var shape:FlexShape = new FlexShape();  
35.             shape.graphics.beginFill(col,1.0);  
36.             shape.graphics.drawRect(0,0,(target as DisplayObject).width,(target as DisplayObject).height);  
37.             shape.graphics.endFill();  
38.             var uiComp:UIComponent = new UIComponent();  
39.             uiComp.addChild(shape);  
40.             UIComponent(target).addChild(uiComp);  
41.         }  
42.     }  

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); } }

 

7、其它：

      1）當想手動播放某效果時，調用效果實例的play方法便可，爲了穩定，通常在調用play方法前先調用一下end,來保證先前效果已結束。

      2） 當給對象添加觸發效果方式時：uicompnent.setStyle("觸發方式",特效對象);

      3）運用組合效果(Sequence與Parallel)時，調用該效果的addChild方法便可，將子效果添加的組合效果對象中。如：

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