常见效果类:
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);