Flex 常见特效

来源:互联网 发布:宏编程左键双击录制 编辑:程序博客网 时间:2024/04/30 05:00
 常见效果类:

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