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来设置效果
<mx:Fade target="{loginWindow}" alphaFrom="1" alphaTo=".5" duration="500" startDelay="200" effectEnd="loginEffectHandler(event)"/>



但是如果程序中效果需要代码控制的,即需要as代码编写效果的时候,则这些效果的代码将会很多很杂。比如你需要一个移动和隐藏的效果
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() ;


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

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


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

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

你可能感兴趣的:(Flex,Flash)