解析Flex效果组件中三大超炫效果

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

你对Flex效果组件的用法是否了解,这里和大家分享一下,由于Flex效果是一种根据时间渐变的过程,因此所有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。

Flex效果组件

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

1)Resize大小调整效果

Flex效果组件中Resize效果用来改变组件的大小。与Move效果相似,Resize效果可以指定初始大小(widthFrom、heightFrom)、目标大小(widthTo、heightTo)和变化量(widthBy、heightBy),其使用规则也与Move效果的初始位置、目标位置和移动量的使用规则相似。下面的代码演示了Resize效果的使用方法:

  1. <mx:Resizeidmx:Resizeid="expand"target="{img}"widthTo="100" 
  2. heightTo="160"/> 
  3.  
  4. <mx:Resizeidmx:Resizeid="contract"target="{img}"widthTo="25" 
  5. heightTo="40"/> 
  6.  
  7. <mx:ControlBar> 
  8.  
  9. <mx:Buttonlabelmx:Buttonlabel="Expand"click="expand.end();  
  10. expand.play();"/> 
  11.  
  12. <mx:Buttonlabelmx:Buttonlabel="Contract"click="contract.end();contract.play();"/> 
  13.  
  14. </mx:ControlBar> 
  15.  
  16. <mx:Imageidmx:Imageid="img"width="25"height="40"source="assets/  
  17. icon01.png"/> 

另外hideChildrenTargets属性用来隐藏Panel容器的其他子项,当我们对Panel容器中的子项应用Resize效果时,默认情况下Panel会反复计算子项的大小和位置以调整布局,如果将这个属性设为true,可以让Panel容器在播放动画时不做这种计算,直到播放完成,这样可以节约系统资源。

2)Rotate旋转效果

Flex效果组件中Rotate是一种旋转效果,使组件围绕指定的点旋转。Rotate可以指定旋转中心的坐标(originX和originY属性)及旋转的起始角度(angleFrom属性)和最终角度(angleTo属性)。起始旋转角度的有效值范围是0~360,而最终角度则可以是正值也可以是负值,默认值为360。如果angleTo的值比angleFrom的值小,则目标沿逆时针方向旋转,否则以顺时针方向旋转。代码如下:

  1. <mx:Rotateidmx:Rotateid="rotate"angleFrom="-45"angleTo="0"target="{img}"  
  2.  
  3. duration="2000"/> 
  4.  
  5. <mx:Imageidmx:Imageid="img"source="assets/plane.png"  
  6. addedEffect="rotate"/> 
  7.  

 另外有时需要设置hideFocusRing属性,以确定在开始播放效果时,效果是否应隐藏对焦环。该属性默认值为true。对于组件而言,对焦环已经被自动隐藏。如果Rotate效果应用于那些不是以UIComponent为基类目标对象,就必须隐藏对焦环。

需要注意的是,hideFocusRing属性在以Effect为基类的效果类中,默认值为false,而在以MaskEffect为基类效果类中,默认值为true。

3)SoundEffect声音效果

Flex效果组件中SoundEffect效果用来播放MP3音频文件。我们可以通过source属性指定要播放的MP3文件,可以直接设置该文件的URL,或是由Embed关键字嵌入MP3文件的Class对象。

SoundEffect效果的属性包括以下几个。

lautoLoad属性用来设置是否自动加载MP3文件,默认值为true。

lbufferTime属性用来设置声音对象的缓冲时间。默认值为1000,单位为毫秒。

lisLoading如果已加载MP3,则该属性为true。

lloops属性用来设置循环次数,默认值为0。

lpanEasingFunction属性用来设置声音均衡效果的缓动函数。

lpanFrom属性和panTo属性用来设置声音对象的起始和最终平移,取值范围在-1.0~1.0之间,其中-1.0表示仅使用左声道,1.0表示仅使用右声道,而0.0表示在2个声道间平均地均衡声音。

lsound属性表示已加载MP3文件的声音对象。

lsource属性表示要播放的MP3文件的URL或类。

lstartTime属性用来设置开始播放时间(以毫秒为单位),默认值为0。

luseDuration属性表示是否根据duration属性指定的时间停止播放,如果为false,则会在MP3完成播放或循环后停止效果,默认值为true。

lvolumeEasingFunction属性用来设置音量效果的缓动函数。

lvolumeFrom属性和volumeTo属性用来设置声音对象的初始和最终音量,取值范围在0.0~1.0之间,默认值为1。

在下面的代码所示的例子中,当应用程序创建完成后开始播放声音文件,声音从左声道过渡到右声道。

代码清单SoundSample.mxml

  1. <?xmlversionxmlversion="1.0"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  4.  
  5. creationCompleteEffect="{mySound}"> 
  6.  
  7. <mx:SoundEffectidmx:SoundEffectid="mySound" 
  8.  
  9. duration="10000" 
  10.  
  11. useDuration="false" 
  12.  
  13. panFrom="-1"panTo="1"  
  14.  
  15. source="@Embed(source='assets/bumperc.mp3')"/> 
  16.  
  17. </mx:Application> 
  18.  

【编辑推荐】

  1. 四种常见Flex效果组件用法解析
  2. Flex主题创建及支持的样式设置方式
  3. 学习笔记 Flex效果组件用法指南
  4. 揭开Flex正则表达式的神秘面纱
  5. Flex数据绑定及其使用频繁的几种情况 

 

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

2010-08-13 13:46:04

Flex效果组件

2010-08-05 10:22:46

Flex效果

2010-08-13 13:31:48

Flex效果组件

2010-08-05 10:16:14

Flex效果

2010-08-05 10:08:06

Flex效果

2010-08-03 11:29:09

Flex全屏

2010-08-05 10:29:11

Flex效果

2013-08-07 10:35:02

AndroidListView拖拽

2013-08-07 10:47:58

Android特效ListView

2011-06-21 13:31:13

JavaScript

2010-08-13 14:39:57

Flex布局

2010-07-23 13:07:39

Perl

2022-06-27 08:01:55

动画CSS前端

2010-07-28 13:48:49

Flex数据绑定

2010-08-13 09:21:12

FlexButton组件

2009-07-10 13:20:37

Swing容器组件

2010-08-13 09:11:11

LabelFlex

2018-04-16 14:39:10

Vue轮播切换

2010-09-30 16:06:21

J2ME平台

2011-09-02 13:57:11

jQuery
点赞
收藏

51CTO技术栈公众号