剖析常见Flex效果组件用法

开发 后端
本文向大家简单介绍一下Flex效果组件的用法,Flex中提供了丰富的效果组件,如果希望在触发器被触发后,延迟一段时间调用Flex效果,可以使用startDelay属性。

本文和大家重点讨论一下Flex效果组件的使用,Flex中提供了丰富的效果组件。由于Flex效果是一种根据时间渐变的过程,因此所有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。

Flex效果组件

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

1)Glow发光效果

Flex效果中Glow是一种发光效果,该效果使用了flash.filters.GlowFilter滤镜类。如果对某个组件应用了Glow效果,就不能对该组件应用GlowFilter滤镜,也无法再次应用Glow效果。下面的代码通过Image对象的mouseDownEffect触发器触发Glow效果:

  1. <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0" 
  2.  
  3. alphaTo="0.3"blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0" 
  4.  
  5. color="0x00FF00"/> 
  6.  
  7. <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/> 

2)Iris虹效果

IFlex效果中ris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标。下面的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Iris效果:

  1. <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/> 
  2.  
  3. <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/> 
  4.  
  5. <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"  
  6.  
  7. visible="{cbx.selected}"showEffect="{irisIn}"hideEffect="{irisOut}"/> 
  8.  
  9. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

3)Move移动效果

Flex效果中Move效果用来实现移动动画。在给定时间内,组件的位置会随时间变化而变化。使用该效果通常需要用到以下几个属性。

lxFrom和yFrom属性用来指定初始位置。

lxTo和yTo属性用来指定目标位置。

lxBy和yBy用来指定移动量,即组件在x轴向和y轴向上的移动速度。

通常只需要指定初始位置、目标位置或移动量这些值中的任意2个,Flex就会计算第3个值。如果指定所有这3个值,Flex就会忽略xBy和yBy值。如果仅指定xTo和yTo值或xBy和yBy值,那么Flex会将xFrom和yFrom设置为对象的当前位置。

下面的程序演示了如何使用Move效果。

代码清单MoveSample.mxml

 

  1. <?xmlversionxmlversion="1.0"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  4.  
  5. paddingLeft="0"layout="absolute"mouseDown="moveImage();"> 
  6.  
  7. <mx:Script> 
  8.  
  9. <![CDATA[  
  10.  
  11. //当按下鼠标时调用该事件  
  12.  
  13. privatefunctionmoveImage():void{  
  14.  
  15. //停止播放Move效果  
  16.  
  17. moveEffect.end();  
  18.  
  19. //设置目标位置  
  20.  
  21. moveEffect.xTo=mouseX;  
  22.  
  23. moveEffect.yTo=mouseY;  
  24.  
  25. //播放Move效果  
  26.  
  27. moveEffect.play();  
  28.  
  29. }  
  30.  
  31. ]]> 
  32.  
  33. </mx:Script> 
  34.  
  35. <mx:Moveidmx:Moveid="moveEffect"target="{img}"/> 
  36.  
  37. <mx:Imageidmx:Imageid="img"source="assets/plane.png"/> 
  38.  
  39. </mx:Application> 
  40.  

 代码中将Application的layout属性设置为absolute,当用户在应用程序中任何位置上单击鼠标时,调用moveImage方法,该方法中首先停止Move效果,然后根据鼠标单击的位置设置目标位置,***播放效果。

通常Move效果应用于使用绝对定位的容器(如Canvas)或使用“layout=absolute”的容器(如Application或Panel)中。如果需要将其应用到自动布局的容器(如VBox或Grid容器)中,虽然会移动目标对象,但下次容器更新其布局时,会将目标对象移回其原始位置。在这种情况下,可以将容器的autoLayout属性设置为false来禁止往回移动,但这会禁用容器中所有控件的布局。

4)Pause暂停效果

Flex效果中Pause效果可以实现在指定时间段内不执行任何操作的功能。如果将Pause效果添加为Sequence效果的子项,可以创建2个其他效果之间的暂停。

【编辑推荐】

  1. 简单Flex效果组件用法指导
  2. Flex基础 创建***个Flex项目
  3. 解析Flex事件执行流程
  4. FlexBuilder3.0与Eclipse3.4的***结合
  5. 学习笔记 FlexBuilder2.0中如何使用基于Lists的控件 
责任编辑:佚名 来源: javaeye.com
相关推荐

2010-08-12 09:25:35

Flex控件

2010-08-13 13:31:48

Flex效果组件

2010-08-05 10:08:06

Flex效果

2010-08-13 13:46:04

Flex效果组件

2010-08-05 10:29:11

Flex效果

2010-08-05 10:22:46

Flex效果

2010-08-12 10:35:06

Flex正则表达式

2010-08-12 11:12:27

Flex误区

2010-08-05 10:58:55

Flex组件

2010-08-13 09:21:12

FlexButton组件

2010-07-28 10:38:29

Flex开源框架

2010-08-13 09:11:11

LabelFlex

2010-08-13 13:39:51

Flex效果组件

2010-08-12 11:29:01

Flex组件

2010-08-06 10:32:49

Flex数据类型

2010-08-05 09:05:14

Flex Button

2010-07-28 10:48:48

FlexReport开

2010-07-27 13:53:15

Flex ComboB

2010-08-10 10:10:34

Flex内存泄露

2010-08-06 15:11:44

Flex界面控件
点赞
收藏

51CTO技术栈公众号