FLEX 特效

標籤：des   style   class   blog   code   http   

一、簡介：

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

 

七、其它：

      1）當想手動播放某效果時，調用效果執行個體的play方法即可，為了穩定，一般在調用play方法前先調用一下end,來保證先前效果已結束。

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

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

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