Flex中效果组件的封装与使用

Flex提供了16 种动画效果类

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



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


可以使用MXML来设置效果
Java代码

   1. <mx:Fade target="{loginWindow}" alphaFrom="1" alphaTo=".5" duration="500" startDelay="200" effectEnd="loginEffectHandler(event)"/> 

<mx:Fade target="{loginWindow}" alphaFrom="1" alphaTo=".5" duration="500" startDelay="200" effectEnd="loginEffectHandler(event)"/>




但是如果程序中效果需要代码控制的，即需要as代码编写效果的时候，则这些效果的代码将会很多很杂。比如你需要一个移动和隐藏的效果
Java代码

   1. var move:Move = new Move ; 
   2.                 move.target = loginWindow ; 
   3.                 move.duration = 500 ; 
   4.                 move.xFrom = 100 ; 
   5.                 move.xTo = 200 ; 
   6.                 move.yFrom = 100 ; 
   7.                 move.yFrom = 200 ; 
   8.                 move.startDelay = 100 ; 
   9.                 move.addEventListener(EffectEvent.EFFECT_END,moveEffectHandler) ; 
  10.                 move.play() ; 
  11.                 var fade:Fade = new Fade ; 
  12.                 fade.alphaFrom = 1 ; 
  13.                 fade.alphaTo = 1;  
  14.                 fade.target= loginWindo ; 
  15.                 fade.startDelay = 200 ; 
  16.                 fade.duration = 500 ; 
  17.                 fade.addEventListener(EffectEvent.EFFECT_END,fadeEffectHandler) ; 
  18.                 fade.play() ; 

var move:Move = new Move ;
move.target = loginWindow ;
move.duration = 500 ;
move.xFrom = 100 ;
move.xTo = 200 ;
move.yFrom = 100 ;
move.yFrom = 200 ;
move.startDelay = 100 ;
move.addEventListener(EffectEvent.EFFECT_END,moveEffectHandler) ;
move.play() ;
var fade:Fade = new Fade ;
fade.alphaFrom = 1 ;
fade.alphaTo = 1;
fade.target= loginWindo ;
fade.startDelay = 200 ;
fade.duration = 500 ;
fade.addEventListener(EffectEvent.EFFECT_END,fadeEffectHandler) ;
fade.play() ;



考虑到精简代码，我将上诉效果封装到一个类中，代码如下

Java代码

   1. package com.utils.effect 
   2. { 
   3.     import flash.display.DisplayObject; 
   4.      
   5.     import mx.effects.Blur; 
   6.     import mx.effects.Fade; 
   7.     import mx.effects.Glow; 
   8.     import mx.effects.Move; 
   9.     import mx.effects.Resize; 
  10.     import mx.effects.Rotate; 
  11.     import mx.events.EffectEvent; 
  12.      
  13.     public class ApplicationEffect 
  14.     { 
  15.         public function ApplicationEffect() 
  16.         { 
  17.         } 
  18.          
  19.         public static function setMove(displayObject:Object,xFrom:Number,xTo:Number,yFrom:Number,yTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void 
  20.         { 
  21.             var move:Move = new Move ; 
  22.             move.target = displayObject ; 
  23.             if(xFrom != -1) 
  24.                 move.xFrom = xFrom ; 
  25.             if(xTo != -1) 
  26.                 move.xTo = xTo ; 
  27.             if(yFrom != -1) 
  28.             move.yFrom = yFrom ; 
  29.             if(yTo != -1) 
  30.                 move.yTo = yTo ; 
  31.             move.duration = dur ; 
  32.             move.startDelay = delay ; 
  33.             if(easingFunction != null) 
  34.                 move.easingFunction = easingFunction ; 
  35.             if(fun !=null) 
  36.                 move.addEventListener(EffectEvent.EFFECT_END,fun) ; 
  37.             move.play() ; 
  38.              
  39.         } 
  40.          
  41.         public static function setResize(displayObject:Object,widthFrom:Number,widthTo:Number,heightFrom:Number,heightTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void 
  42.         { 
  43.             var resize:Resize = new Resize ; 
  44.             resize.target = displayObject ; 
  45.             if(widthFrom != -1) 
  46.                 resize.widthFrom = widthFrom ; 
  47.             if(widthTo != -1) 
  48.                 resize.widthTo  = widthTo ; 
  49.             if(heightFrom != -1) 
  50.                 resize.heightFrom = heightFrom ; 
  51.             if(heightTo != -1) 
  52.                 resize.heightTo = heightTo ; 
  53.             resize.duration = dur ; 
  54.             resize.startDelay = delay ; 
  55.             if(easingFunction != null) 
  56.                 resize.easingFunction = easingFunction ; 
  57.             if(fun !=null) 
  58.                 resize.addEventListener(EffectEvent.EFFECT_END,fun); 
  59.             resize.play(); 
  60.         } 
  61.          
  62.         public static function setFade(displayObject:Object,duration:Number,alphaFrom:Number,alphaTo:Number,delay:Number,fun:Function,easingFunction:Function=null):void 
  63.         { 
  64.             var fade:Fade = new Fade ; 
  65.             fade.target=displayObject; 
  66.             fade.duration=duration; 
  67.             if(alphaFrom != -1) 
  68.                 fade.alphaFrom=alphaFrom; 
  69.             if(alphaTo != -1) 
  70.                 fade.alphaTo=alphaTo; 
  71.             if(delay != -1) 
  72.                 fade.startDelay = delay ; 
  73.             if(easingFunction != null) 
  74.                 fade.easingFunction = easingFunction ; 
  75.             if(fun !=null) 
  76.                 fade.addEventListener(EffectEvent.EFFECT_END,fun); 
  77.             fade.play(); 
  78.         } 
  79.          
  80.         public static function setBlur(displayObject:Object,duration:Number,blurXFrom:Number,blurXTo:Number,blurYFrom:Number,blurYTo:Number,fun:Function,easingFunction:Function=null):void 
  81.         { 
  82.             var blur:Blur= new Blur ; 
  83.             blur.target=displayObject ; 
  84.             blur.duration=duration ; 
  85.             if(blurXFrom != -1) 
  86.                 blur.blurXFrom=blurXFrom ; 
  87.             if(blurXTo != -1) 
  88.                 blur.blurXTo=blurXTo ; 
  89.             if(blurYFrom != -1) 
  90.                 blur.blurYFrom=blurYFrom ; 
  91.             if(blurYTo != -1) 
  92.                 blur.blurYTo=blurYTo ; 
  93.             if(easingFunction != null) 
  94.                 blur.easingFunction = easingFunction ; 
  95.             if(fun !=null) 
  96.                 blur.addEventListener(EffectEvent.EFFECT_END,fun) ; 
  97.             blur.play(); 
  98.         } 
  99.         public static function setRotate(displayObject:Object,angleFrom:Number,angleTo:Number,fun:Function,easingFunction:Function=null):void 
100.         { 
101.             var rotate:Rotate = new Rotate; 
102.             rotate.target=displayObject; 
103.             if(angleFrom != -1) 
104.                 rotate.angleFrom=angleFrom; 
105.             if(angleTo != -1) 
106.                 rotate.angleTo=angleTo; 
107.             if(easingFunction != null) 
108.                 rotate.easingFunction = easingFunction ; 
109.             if(fun !=null) 
110.                 rotate.addEventListener(EffectEvent.EFFECT_END,fun); 
111.             rotate.play(); 
112.         } 
113.          
114.         public static function setGlow(displayObject:DisplayObject,color:Number,alphaFrom:Number,alphaTo:Number,blurXFrom:Number, 
115.         blurXTo:Number,blurYFrom:Number,blurYTo:Number,dur:Number,delay:Number,fun:Function,easingFunction:Function=null):void 
116.         { 
117.             var glow:Glow = new Glow ; 
118.             glow.target = displayObject ; 
119.             if(color != -1) 
120.                 glow.color = color ; 
121.             if(alphaFrom != -1) 
122.                 glow.alphaFrom = alphaFrom; 
123.             if(alphaTo != -1) 
124.                 glow.alphaTo = alphaTo; 
125.             if(blurXFrom != -1) 
126.                 glow.blurXFrom = blurXFrom; 
127.             if(blurXTo != -1) 
128.                 glow.blurXTo = blurXTo; 
129.             if(blurYFrom != -1) 
130.                 glow.blurYFrom = blurYFrom; 
131.             if(blurYTo != -1) 
132.                 glow.blurYTo = blurYTo ; 
133.             if(delay != -1) 
134.                 glow.startDelay = delay ; 
135.             if(easingFunction != null) 
136.                 glow.easingFunction = easingFunction ; 
137.             if(fun != null) 
138.                 glow.addEventListener(EffectEvent.EFFECT_END,fun) ; 
139.             glow.play() ; 
140.         } 
141.          
142.     } 
143. } 

package com.utils.effect
{
import flash.display.DisplayObject;

import mx.effects.Blur;
import mx.effects.Fade;
import mx.effects.Glow;
import mx.effects.Move;
import mx.effects.Resize;
import mx.effects.Rotate;
import mx.events.EffectEvent;

public class ApplicationEffect
{
public function ApplicationEffect()
{
}

public static function setMove(displayObject:Object,xFrom:Number,xTo:Number,yFrom:Number,yTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
{
var move:Move = new Move ;
move.target = displayObject ;
if(xFrom != -1)
move.xFrom = xFrom ;
if(xTo != -1)
move.xTo = xTo ;
if(yFrom != -1)
move.yFrom = yFrom ;
if(yTo != -1)
move.yTo = yTo ;
move.duration = dur ;
move.startDelay = delay ;
if(easingFunction != null)
move.easingFunction = easingFunction ;
if(fun !=null)
move.addEventListener(EffectEvent.EFFECT_END,fun) ;
move.play() ;

}

public static function setResize(displayObject:Object,widthFrom:Number,widthTo:Number,heightFrom:Number,heightTo:Number,dur:int,delay:int,fun:Function,easingFunction:Function=null):void
{
var resize:Resize = new Resize ;
resize.target = displayObject ;
if(widthFrom != -1)
resize.widthFrom = widthFrom ;
if(widthTo != -1)
resize.widthTo  = widthTo ;
if(heightFrom != -1)
resize.heightFrom = heightFrom ;
if(heightTo != -1)
resize.heightTo = heightTo ;
resize.duration = dur ;
resize.startDelay = delay ;
if(easingFunction != null)
resize.easingFunction = easingFunction ;
if(fun !=null)
resize.addEventListener(EffectEvent.EFFECT_END,fun);
resize.play();
}

public static function setFade(displayObject:Object,duration:Number,alphaFrom:Number,alphaTo:Number,delay:Number,fun:Function,easingFunction:Function=null):void
{
var fade:Fade = new Fade ;
fade.target=displayObject;
fade.duration=duration;
if(alphaFrom != -1)
fade.alphaFrom=alphaFrom;
if(alphaTo != -1)
fade.alphaTo=alphaTo;
if(delay != -1)
fade.startDelay = delay ;
if(easingFunction != null)
fade.easingFunction = easingFunction ;
if(fun !=null)
fade.addEventListener(EffectEvent.EFFECT_END,fun);
fade.play();
}

public static function setBlur(displayObject:Object,duration:Number,blurXFrom:Number,blurXTo:Number,blurYFrom:Number,blurYTo:Number,fun:Function,easingFunction:Function=null):void
{
var blur:Blur= new Blur ;
blur.target=displayObject ;
blur.duration=duration ;
if(blurXFrom != -1)
blur.blurXFrom=blurXFrom ;
if(blurXTo != -1)
blur.blurXTo=blurXTo ;
if(blurYFrom != -1)
blur.blurYFrom=blurYFrom ;
if(blurYTo != -1)
blur.blurYTo=blurYTo ;
if(easingFunction != null)
blur.easingFunction = easingFunction ;
if(fun !=null)
blur.addEventListener(EffectEvent.EFFECT_END,fun) ;
blur.play();
}
public static function setRotate(displayObject:Object,angleFrom:Number,angleTo:Number,fun:Function,easingFunction:Function=null):void
{
var rotate:Rotate = new Rotate;
rotate.target=displayObject;
if(angleFrom != -1)
rotate.angleFrom=angleFrom;
if(angleTo != -1)
rotate.angleTo=angleTo;
if(easingFunction != null)
rotate.easingFunction = easingFunction ;
if(fun !=null)
rotate.addEventListener(EffectEvent.EFFECT_END,fun);
rotate.play();
}

public static function setGlow(displayObject:DisplayObject,color:Number,alphaFrom:Number,alphaTo:Number,blurXFrom:Number,
blurXTo:Number,blurYFrom:Number,blurYTo:Number,dur:Number,delay:Number,fun:Function,easingFunction:Function=null):void
{
var glow:Glow = new Glow ;
glow.target = displayObject ;
if(color != -1)
glow.color = color ;
if(alphaFrom != -1)
glow.alphaFrom = alphaFrom;
if(alphaTo != -1)
glow.alphaTo = alphaTo;
if(blurXFrom != -1)
glow.blurXFrom = blurXFrom;
if(blurXTo != -1)
glow.blurXTo = blurXTo;
if(blurYFrom != -1)
glow.blurYFrom = blurYFrom;
if(blurYTo != -1)
glow.blurYTo = blurYTo ;
if(delay != -1)
glow.startDelay = delay ;
if(easingFunction != null)
glow.easingFunction = easingFunction ;
if(fun != null)
glow.addEventListener(EffectEvent.EFFECT_END,fun) ;
glow.play() ;
}

}
}



这样，使用效果会非常方便，使用方法如下

Java代码

   1. ApplicationEffect.setMove(loginWindow,0,100,0,100,500,200,moveEffectHandler,null) ; 

ApplicationEffect.setMove(loginWindow,0,100,0,100,500,200,moveEffectHandler,null) ;