Flex 常见特效

常见效果类：

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

<wbr><wbr><wbr><wbr><wbr> Sequence:顺序播放组合</wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr> Parallel：同时播放组合</wbr></wbr></wbr></wbr></wbr>

常见触发动画效果方式：

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

<wbr></wbr>

部分示例：

<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr>

1：glow(发光)

代码：

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

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> alphaFrom="0.6" alphaTo="0.2"</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> blurXFrom="0.0" blurXTo="50.0"</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> blurYFrom="0.0" blurYTo="50.0"</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> color="0xffffff"/&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr></wbr>

duratuion 是特效的时间 1000 毫秒

alphaFrom 是透明度从 0.6 开始

alphaTo 是透明度到 0.2

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

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

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

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

color 是发光的颜色

<wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr>

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

代码：

import mx.effects.easing.*;

<mx:Sequence id="movePauseMove">

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;mx:Move yBy="-150" duration="1000" easingFunction="Bounce.easeOut"/&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr><wbr><wbr><wbr><wbr> &lt;mx:Move yBy="150" duration="1000" easingFunction="Bounce.easeIn"/&gt;</wbr></wbr></wbr></wbr></wbr></wbr></wbr>

<wbr><wbr><wbr> &lt;/mx:Sequence&gt;</wbr></wbr></wbr>

yBy 是作用在Y方向。

duratuion 是特效的时间 1000 毫秒

easingFunction 是松开动作

Bounce.easeOut 是跳出的动作

Bounce.easeIn 是跳回的动作

<wbr></wbr>

作用到控件：

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

mouseDownEffect="{movePauseMove}"

id="image4"/>

<wbr></wbr>

自定义效果：

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

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

<wbr></wbr>

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

<wbr></wbr>

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

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

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

<wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr><wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr></wbr>

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