简单Flex效果组件用法指导

开发 后端
本文向大家介绍几个简单Flex效果组件,由于Flex效果是一种根据时间渐变的过程,因此所有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。

在学习Flex的过程中,你可能会遇到Flex效果这样的问题,这里和大家分享一下几个常用的Flex效果组件,Flex中提供了丰富的效果组件,所有效果都具有duration属性,可以通过设置repeatCount属性和repeatDelay属性,来分别控制效果播放的次数和重复播放效果的时间间隔(以毫秒为单位)。

简单Flex效果组件

Flex中提供了丰富的效果组件。由于Flex效果是一种根据时间渐变的过程,因此所有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。也可以通过设置repeatCount属性和repeatDelay属性,来分别控制效果播放的次数和重复播放效果的时间间隔(以毫秒为单位)。如果希望在触发器被触发后,延迟一段时间调用效果,可以使用startDelay属性。

1)AnimateProperty动画效果

Flex效果中AnimateProperty是用来为组件的属性或样式设置动画的效果。我们可以通过其property属性设定目标对象上需要设置动画效果的属性,然后设置fromValue属性和toValue属性,为效果提供属性的起始值和结束值。例如下面的代码使用mouseDownEffect触发器,当单击图片时,触发AnimateProperty效果,在1秒钟内,Image对象的scaleX属性由1变为2,被横向拉伸。代码如下:

 

  1. <mx:AnimatePropertyidmx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1  
  2.  
  3. "toValue="2" 
  4.  
  5. duration="1000"/> 
  6.  
  7. <mx:Imageidmx:Imageid="img"source="assets/plane.png"  
  8.  
  9. mouseDownEffect="{animateProperty}"/> 
  10.  

 如果希望通过样式设置效果,可以将isStyle属性设置为ture,然后通过setStyle()方法设置目标对象的样式,从而达到设置效果的目的。

2)Blur模糊效果

Flex效果中Blur是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜,如果对某个组件应用了Blur效果,就不能再对该组件应用BlurFilter滤镜,也无法再次应用Blur效果。下面的代码通过Image对象的mouseDownEffect触发器触发Blur效果,在1秒钟内,Image对象将逐渐变得模糊。代码如下:

 

  1. <mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0" 
  2. blurXTo="10.0" 
  3.  
  4. blurYFrom="0.0"blurYTo="10.0"/> 
  5.  
  6. <mx:Imageidmx:Imageid="img"source="assets/plane.png"  
  7. mouseDownEffect="{blurImage}"/> 
  8.  

 3)Dissolve溶解效果

Flex效果中Dissolve是一种溶解效果。当效果开始播放时,将创建一个不透明的矩形,这个矩形悬浮在目标组件的上方,它的颜色由Dissolve.color属性设置,此时透明度为“1.0-Dissolve.alphaFrom”。随着效果的播放,该矩形的alpha属性将从(1.0-alphaFrom)逐渐变为“1.0–alphaTo”,直到效果播放完成,矩形被销毁。

如果目标对象是一个容器,那么Dissolve效果将应用于容器内部的内容区域。

下面的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Dissolve效果:

  1. <mx:Dissolveidmx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0" 
  2.  
  3. alphaTo="0.0"/> 
  4.  
  5. <mx:Dissolveidmx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0" 
  6.  
  7. alphaTo="1.0"/> 
  8.  
  9. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
  10.  
  11. <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  
  12.  
  13. hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/> 
  14.  

 4)Fade淡入淡出效果

Flex效果中Fade是一种淡入淡出效果,它通过设置组件的alpha属性来实现动画效果。当使用showEffect或hideEffect触发器设置Fade效果时,如果省略了alphaFrom和alphaTo属性的值,那么在showEffect触发器上目标对象的透明度将从0变化到目标的当前alpha值,而在hideEffect触发器上则会从当前的alpha值变化到0。如果要对字体使用Fade效果,必须使用嵌入字体。

下面的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Fade效果:

  1. <mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0" 
  2. alphaTo="0.0"/> 
  3.  
  4. <mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0" 
  5. alphaTo="1.0"/> 
  6.  
  7. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
  8.  
  9. <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  
  10.  
  11. hideEffect="{fadeOut}"showEffect="{fadeIn}"/> 

【编辑推荐】

  1. 技术分享 用FlexBuilder创建Flex项目
  2. Flex基础 创建***个Flex项目
  3. 解析Flex事件执行流程
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 

 

责任编辑:佚名 来源: javaeye.com
相关推荐

2010-08-13 13:46:04

Flex效果组件

2010-07-28 10:48:48

FlexReport开

2010-07-27 13:53:15

Flex ComboB

2010-08-05 10:16:14

Flex效果

2010-07-27 15:28:02

Flex DataBi

2010-08-05 10:29:11

Flex效果

2010-08-05 10:22:46

Flex效果

2010-08-13 13:31:48

Flex效果组件

2010-07-28 10:38:29

Flex开源框架

2010-07-30 10:02:40

Flex验证控件

2010-07-29 09:44:17

Flex编程

2010-08-06 10:32:49

Flex数据类型

2010-08-05 09:05:14

Flex Button

2010-08-05 13:44:12

Flex布局

2010-08-13 09:21:12

FlexButton组件

2010-08-13 11:21:31

Flex渲染器

2010-08-11 16:03:02

Flex DataGr

2010-08-13 09:11:11

LabelFlex

2010-08-13 13:39:51

Flex效果组件

2010-08-10 14:34:37

QTPFlex
点赞
收藏

51CTO技术栈公众号