Flex 常见特效

最新推荐文章于 2021-11-20 16:56:49 发布

最新推荐文章于 2021-11-20 16:56:49 发布 · 90 阅读

常见效果类：

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类。如：

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

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