四种常见Flex效果组件用法解析

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

你对Flex效果组件的概念是否了解,这里和大家分享一下几个常见的Flex效果,我们可以通过设置repeatCount属性和repeatDelay属性,来分别控制效果播放的次数和重复播放效果的时间间隔(以毫秒为单位)。

Flex效果组件

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

1)Flex效果组件之Glow发光效果

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

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

 2)Flex效果组件之Iris虹效果

Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标。下面的代码使用一个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"visible="{cbx.selected}" 
  6.  
  7. showEffect="{irisIn}"hideEffect="{irisOut}"/> 
  8.  
  9. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

3)Flex效果组件之Move移动效果

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

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

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

4)Flex效果组件之Pause暂停效果

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

【编辑推荐】

  1. 学习笔记 Flex效果组件用法指南
  2. 剖析常见Flex效果组件用法
  3. 全面认识Flex应用程序的六大元素
  4. 简单Flex效果组件用法指导
  5. Flex数据绑定及其使用频繁的几种情况 
责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-05 10:16:14

Flex效果

2010-08-05 13:44:12

Flex布局

2010-08-05 10:22:46

Flex效果

2010-08-05 10:08:06

Flex效果

2010-08-13 09:21:12

FlexButton组件

2010-08-13 13:46:04

Flex效果组件

2010-08-05 09:33:08

Flex页面跳转

2010-07-28 13:54:42

Flex数据绑定

2010-08-13 09:11:11

LabelFlex

2010-08-05 10:29:11

Flex效果

2011-11-24 16:34:39

Java

2010-08-13 13:39:51

Flex效果组件

2022-08-01 07:56:23

React Hook开发组件

2021-06-04 10:45:31

软件架构分布式

2010-08-11 14:22:26

Flex弹出窗口

2010-08-06 14:28:55

Flex CSS样式

2010-08-05 10:58:55

Flex组件

2010-08-06 15:11:44

Flex界面控件

2010-08-02 16:47:46

Flex

2010-08-12 09:25:35

Flex控件
点赞
收藏

51CTO技术栈公众号