超炫Flex效果组件用法指导

开发 后端
Flex中提供了丰富的效果组件,这里和大家分享一下,通过设置repeatCount属性和repeatDelay属性,我们可以分别控制效果播放的次数和重复播放效果的时间间隔。

本文和大家重点讨论一下Flex效果组件的用法,如果希望在触发器被触发后,延迟一段时间调用Flex效果,可以使用startDelay属性。

Flex效果组件

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

1)AnimateProperty动画效果

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

  1. <mx:AnimatePropertyidmx:AnimatePropertyid="animateProperty"property="scaleX"  
  2. fromValue="1  
  3.  
  4. "toValue="2" 
  5.  
  6. duration="1000"/> 
  7.  
  8. <mx:Imageidmx:Imageid="img"source="assets/plane.png"  
  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)WipeUp、WipeRight、WipeDown、WipeLeft擦除效果

Flex效果中这些类定义了4个方向的擦除效果,通常与showEffect和hideEffect触发器配合使用,使用起来非常简便,如下面的例子。

代码清单WipeSample.mxml

  1. <?xmlversionxmlversion="1.0"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
  4.  
  5. <!--定义擦除效果--> 
  6.  
  7. <mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/> 
  8.  
  9. <mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/> 
  10.  
  11. <mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/> 
  12.  
  13. <mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/> 
  14.  
  15. <mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/> 
  16.  
  17. <mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/> 
  18.  
  19. <mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/> 
  20.  
  21. <mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/> 
  22.  
  23. <mx:Paneltitlemx:Paneltitle="WipeEffects"> 
  24.  
  25. <mx:HBoxwidthmx:HBoxwidth="100%"> 
  26.  
  27. <!--向上擦除--> 
  28.  
  29. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se  
  30.  
  31. lected}"  
  32.  
  33. hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/> 
  34.  
  35. <!--向左擦除--> 
  36.  
  37. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se  
  38.  
  39. lected}"  
  40.  
  41. hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/> 
  42.  
  43. <!--向下擦除--> 
  44.  
  45. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se  
  46.  
  47. lected}"  
  48.  
  49. hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/> 
  50.  
  51. <!--向右擦除--> 
  52.  
  53. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se  
  54.  
  55. lected}"  
  56.  
  57. hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/> 
  58.  
  59. </mx:HBox> 
  60.  
  61. <mx:ControlBar> 
  62.  
  63. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
  64.  
  65. </mx:ControlBar> 
  66.  
  67. </mx:Panel> 
  68.  
  69. </mx:Application> 
  70.  

 4)Zoom缩放效果

Flex效果组件中Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是,Resize改变目标对象的长宽属性,而Zoom改变的目标对象的缩放比例。在下面的例子中,当鼠标移动到图片上时开始播放Zoom效果,鼠标移出时还原。

代码清单ZoomSample.mxml

  1. <?xmlversionxmlversion="1.0"encoding="utf-8"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
  4.  
  5. <mx:Script> 

【编辑推荐】

  1. 解析Flex效果组件中三大超炫效果
  2. Flex主题创建及支持的样式设置方式
  3. 学习笔记 Flex效果组件用法指南
  4. 剖析常见Flex效果组件用法
  5. Flex数据绑定及其使用频繁的几种情况 

 

 

责任编辑:佚名 来源: csdn.net
相关推荐

2010-08-05 10:08:06

Flex效果

2010-08-13 13:39:51

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:22:46

Flex效果

2010-08-05 10:29:11

Flex效果

2010-08-13 13:31:48

Flex效果组件

2010-07-29 09:44:17

Flex编程

2010-07-30 10:02:40

Flex验证控件

2010-07-28 10:38:29

Flex开源框架

2010-08-05 13:44:12

Flex布局

2010-08-05 09:05:14

Flex Button

2010-08-06 10:32:49

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

2013-08-07 10:35:02

AndroidListView拖拽
点赞
收藏

51CTO技术栈公众号