FLEX 特效

时间:2022-09-21 10:18:18

一、简介:

flex特效是ria应用程序的rich的重要组成部分。

EffectManager类管理所有的特效实例以避免不必要的定时器和方法调用造成的内内存使用过大。一个效果由两部分组成:一是效果的EffectInstance,它包含了效果的基本信息,标识出要执行什么,怎么执行,是移动还是渐变等。二是Effect类,它在此扮演工厂的角色,来控制效果的执行等,如何时执行、何时删除等。

二、播放步骤:

一个效果的播放共有四个步骤。

1)为每一个目标组件创建一个EffectInstance实例。如果一个效果的目标组件是多个的话,就创建多个EffectInstance实例。

2) 框架从工厂对象里复制所有的配置信息到每一个EffectInstance实例。包括执行时间、重复次数等信息。

3) 效果在对象上使用第一步创建的EffectInstance实例对象播放。

4) 播放结束,框架、EffectManager类将删除播放完的实例对象。

三、常见效果类:

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

  1. public class TestEffect extends Effect
  2. {
  3. public var alp:Number;
  4. public var col:uint;
  5. public function TestEffect(target:Object=null)
  6. {
  7. super(target);
  8. instanceClass = TestInstance;
  9. }
  10. override protected function initInstance(instance:IEffectInstance):void{
  11. super.initInstance(instance);
  12. TestInstance(instance).col = this.col;
  13. TestInstance(instance).alp = this.alp;
  14. }
  15. }
  16. public class TestInstance extends EffectInstance
  17. {
  18. public var alp:Number;
  19. public var col:uint;
  20. public function TestInstance(target:Object)
  21. {
  22. super(target);
  23. }
  24. override public function play():void{
  25. super.play();
  26. (target as DisplayObject).alpha = this.alp;
  27. var shape:FlexShape = new FlexShape();
  28. shape.graphics.beginFill(col,1.0);
  29. shape.graphics.drawRect(0,0,(target as DisplayObject).width,(target as DisplayObject).height);
  30. shape.graphics.endFill();
  31. var uiComp:UIComponent = new UIComponent();
  32. uiComp.addChild(shape);
  33. UIComponent(target).addChild(uiComp);
  34. }
  35. }

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

FLEX 特效的更多相关文章

  1. 个人收藏的flex特效网址【经典中的*】

    http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html经典中的经典 h ...

  2. Flex里的特效

      Flex中提供了丰富的效果组件.因为效果是一种依据时间渐变的过程,因此全部效果都具有duration属性,用来设置播放时间(以毫秒为单位).也能够通过设置repeatCount属性和repeatD ...

  3. FLEX各种特效集合

    http://www.noupe.com/adobe/flex-developers-toolbox-free-components-themes-and-tutorials.html经典中的经典 h ...

  4. 多栏多列布局(display&colon;flex)

    display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用, display:flex 这个牛逼的css ...

  5. paip&period;关于动画特效原理 html js 框架总结

    paip.关于动画特效原理 html js 框架总结 1. 动画框架的来源:flex,jqueryui 3 2. 特效的分类 3 2.1. Property effects 动态改变一个或多个目标对象 ...

  6. display&colon;flex 多栏多列布局

    转自:http://www.360doc.com/content/14/0811/01/2633_400926000.shtml display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3 ...

  7. Flex开发自定义控件

    前期准备: 点击File菜单 -> New -> MXML Component,然后弹出一个对话框. 在对话框中输入组件名,选择此组件继承的类型,如:Canvas,DataGrid,Com ...

  8. Flex应用一览表

    1.Flex控件之repeater和radioButton控件应用 2.Flex之DataGrid和Tree控件的数据源XML格式  3.Flex控件之combobox应用 4.转:Flex的Arra ...

  9. 150个JS特效脚本

    收集了其它一些不太方便归类的JS特效,共150个,供君查阅. 1. simplyScroll simplyScroll这个jQuery插件能够让任意一组元素产生滚动动画效果,可以是自动.手动滚动,水平 ...

随机推荐

  1. linux ssh key配置方法

    转自:http://blog.csdn.net/zzk197/article/details/7915307 一:简洁的配置文件[root@cisco ~]# vi /etc/ssh/sshd_con ...

  2. iOS&colon;授权用户定位NSLocationManager的使用

    请求用户批准定位: 在iOS8,要想获得用户的位置,必须经过用户批准授权 开发者可以在Info.plist中添加两个配置项 –NSLocationAlwaysUsageDescription –NSL ...

  3. javaweb学习总结二十二&lpar;servlet开发中常见的问题汇总&rpar;

    一:web应用的映射问题 通常我们从别人那里拷贝来的代码,自己会修改应用的名称,但是web映射的访问路径并没有修改,还是原来的映射. 解决方法: 工程右键--properties--myeclipse ...

  4. Python的函数式编程-传入函数、排序算法、函数作为返回值、匿名函数、偏函数、装饰器

    函数是Python内建支持的一种封装,我们通过把大段代码拆成函数,通过一层一层的函数调用,就可以把复杂任务分解成简单的任务,这种分解可以称之为面向过程的程序设计.函数就是面向过程的程序设计的基本单元. ...

  5. 开始学习&lt&semi;p&gt&semi;标签,添加段落

    如果想在网页上显示文章,这时就需要<p>标签了,把文章的段落放到<p>标签中. 语法: <p>段落文本</p> 注意一段文字一个<p>标签, ...

  6. hud 2099

    #include <stdio.h> #include <stdlib.h> int main() { int m,n,i,flag; ) { flag=; &&amp ...

  7. 修改Linux主机名

    如果安装时没有设置,一般默认主机名为localhost.localdomain. 通过以下方式修改成自己设置的主机名: 1. vi /etc/sysconfig/network NETWORKING= ...

  8. MySQL数值类型

    MySQL数值类型 MySQL支持所有标准的SQL数值数据类型.这些类型包括数值数据类型INTEGER.SMALLINT.DECIMAL.NUMERIC和近似数值数据类型FLOAT.REAL.DOUB ...

  9. visio交叉线不凸起

    使用visio作图时,经常会遇到交叉线在相交时会形成一个弯曲弓形,这有时十分影响视图效果.可以采用下面的方法消除弓形. 1.visio2003:只需要选中该交叉线,选择“格式”->“行为”,在打 ...

  10. 重建控制文件ORA-12720

    重建过程出错:ORA-01503: CREATE CONTROLFILE failedORA-12720: operation requires database is in EXCLUSIVE mo ...