Flex特效使用大全

本文和大家重点讨论一下Flex特效，Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果，从而使用户界面更加丰富多彩。本文将介绍如何在Flex应用程序中创建行为及动画效果。

 Flex特效讲解

Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果，从而使用户界面更加丰富多彩。本章将介绍如何在Flex应用程序中创建行为及动画效果。

1.什么是Flex行为

Flex中的行为（Behavior）是由触发器（Trigger）和效果（Effect）组合而成。当用户在界面中进行某项操作时，如单击某个按钮，触发器会被激活，从而使目标组件发生某些视觉或听觉上的变化，例如播放一段逐渐显示的动画或发出声响等。触发器可以由用户操作触发，也可以由程序触发，一个触发器可以对应多个效果。

1.1触发器与效果

触发器的使用非常简单，可以作为MXML标记中的一个属性，也可以在标记中调用，或者在ActionScript中用setStyle()和getStyle()方法调用。触发器的名称为triggerEvent名称+“Effect”后缀。按照这种名称约定，mouseDown事件的触发器名称为mouseDownEffect。Flex中提供的触发器名称包括以下几种。

laddedEffect：当组件添加到容器中时触发。

lcreationCompleteEffect：组件创建完毕时触发。

lfocusInEffect：组件获得焦点时触发。

lfocusOutEffect：组件失去焦点时触发。

lhideEffect：当组件的visible属性更改为false时触发。

lmouseDownEffect：按下鼠标时触发。

lmouseUpEffect：释放鼠标时触发。

lmoveEffect：组件移动时触发。

lremovedEffect：组件被移除时触发。

lresizeEffect：组件改变大小时触发。

lrollOutEffect：鼠标从组件上移开时触发。

lrollOverEffect：鼠标移动到组件上时触发。

lshowEffect：组件的visible属性更改为true时触发。

Flex的动画效果由一个工厂类（Factory）和一个实例类（Instance）构成。工厂类用来处理事件、控制动画，它的名称就是效果的名称，如Zoom。通常我们在应用程序中创建一个工厂类的实例，设置必要的参数，然后将该实例与触发器关联。实例类则用来实现动画效果，当触发器被触发或调用play()方法时，工厂类创建一个实例类的实例来播放所需效果，执行结束后，该实例会被销毁，如果一个效果对应多个目标对象，每一个目标对象都会有一个自己的实例。实例类的命名规则为效果名+Instance。如之前定义的工厂类名为Zoom，那么实例类名就是ZoomInstance。Effect的这种机制，是设计模式中工厂模式的一种应用，效果执行的时候，运行的不是Zoom，而是ZoomInstance。

下面的图9-1分别表现了工厂类和实例类的层级关系。Effect类是一个抽象基类，是定义所有效果的基本工厂类。EffectInstance类是定义所有效果实例子类的基类。在应用程序中不会创建Effect类本身的实例，而是创建一个子类的实例，如Mask或Tween。

图9-1工厂类与实例类

#p#1.2简单效果组件

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

1）Flex特效之AnimateProperty动画效果

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. "toValue="2"
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. duration="1000"/>
    6. 
  
  
  
  
  6. 
  
  
  
  
    8. 
  
  
  
  
  8.

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

2）Flex特效之Blur模糊效果

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. blurYFrom="0.0"blurYTo="10.0"/>
    4. 
  
  
  
  
  4. 
  
  
  
  
    6.

3）Flex特效之Dissolve溶解效果

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

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

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. .0"/>
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. 
  
  
  
  
  6. 
  
  
  
  
  7. 0"/>
    8. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. 
  
  
  
  
  12. 
  
  
  
  
  13. hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/>
    14.

#p#4）Flex特效之Fade淡入淡出效果

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

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8. 
  
  
  
  
  9. hideEffect="{fadeOut}"showEffect="{fadeIn}"/>
    10.

5）Flex特效之Glow发光效果

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x 
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. 00FF00"/>
    6. 
  
  
  
  
  6. 
  
  
  
  
    8.

6）Flex特效之Iris虹效果

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
  5. 
  
  
  
  
  6. 
  
  
  
  
  7. showEffect="{irisIn}"hideEffect="{irisOut}"/>
    8. 
  
  
  
  
  8. 
  
  
  
  
    10.

7）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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
  5. "0" 
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. layout="absolute"mouseDown="moveImage();">
    8. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. 
  
  
  
  
  12. 
  
  
  
  
  13. //当按下鼠标时调用该事件 
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. privatefunctionmoveImage():void{ 
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. //停止播放Move效果 
    18. 
  
  
  
  
  18. 
  
  
  
  
  19. moveEffect.end(); 
    20. 
  
  
  
  
  20. 
  
  
  
  
  21. //设置目标位置 
    22. 
  
  
  
  
  22. 
  
  
  
  
  23. moveEffect.xTo=mouseX; 
    24. 
  
  
  
  
  24. 
  
  
  
  
  25. moveEffect.yTo=mouseY; 
    26. 
  
  
  
  
  26. 
  
  
  
  
  27. //播放Move效果 
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. moveEffect.play(); 
    30. 
  
  
  
  
  30. 
  
  
  
  
  31. } 
    32. 
  
  
  
  
  32. 
  
  
  
  
  33. ]]>
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. 
  
  
  
  
  36. 
  
  
  
  
    38. 
  
  
  
  
  38. 
  
  
  
  
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. 
  
  
  
  
  42.

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

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

8）Flex特效之Pause暂停效果

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

9）Flex特效之Resize大小调整效果

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
    8. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. 
  
  
  
  
  12. 
  
  
  
  
    14. 
  
  
  
  
  14.

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

10）Flex特效之Rotate旋转效果

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

 
 
 
 
    
  
  
  
  
  1. 
  
  
  
  
  2. 
  
  
  
  
  3. duration="2000"/>
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6.

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

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

11）Flex特效之SoundEffect声音效果

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

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
  3. 
  
  
  
  
  4. 
  
  
  
  
  5. creationCompleteEffect="{mySound}">
    6. 
  
  
  
  
  6. 
  
  
  
  
  7. 
  
  
  
  
  8. 
  
  
  
  
  9. duration="10000"
    10. 
  
  
  
  
  10. 
  
  
  
  
  11. useDuration="false"
    12. 
  
  
  
  
  12. 
  
  
  
  
  13. panFrom="-1"panTo="1" 
    14. 
  
  
  
  
  14. 
  
  
  
  
  15. source="@Embed(source='assets/bumperc.mp3')"/>
    16. 
  
  
  
  
  16. 
  
  
  
  
  17. 
  
  
  
  
  18.

#p#12）Flex特效之WipeUp、WipeRight、WipeDown、WipeLeft擦除效果

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

代码清单WipeSample.mxml

 
 
 
 
    
  
  
  
  
  1.  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
    6. 
  
  
  
  
  6. 
  
  
  
  
    8. 
  
  
  
  
  8. 
  
  
  
  
    10. 
  
  
  
  
  10. 
  
  
  
  
    12. 
  
  
  
  
  12. 
  
  
  
  
    14. 
  
  
  
  
  14. 
  
  
  
  
    16. 
  
  
  
  
  16. 
  
  
  
  
    18. 
  
  
  
  
  18. 
  
  
  
  
    20. 
  
  
  
  
  20. 
  
  
  
  
    22. 
  
  
  
  
  22. 
  
  
  
  
    24. 
  
  
  
  
  24. 
  
  
  
  
    26. 
  
  
  
  
  26. 
  
  
  
  
    28. 
  
  
  
  
  28. 
  
  
  
  
  29. 
  
  
  
  
  30. 
  
  
  
  
  31. hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/>
    32. 
  
  
  
  
  32. 
  
  
  
  
    34. 
  
  
  
  
  34. 
  
  
  
  
  35. 
  
  
  
  
  36. 
  
  
  
  
  37. hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/>
    38. 
  
  
  
  
  38. 
  
  
  
  
    40. 
  
  
  
  
  40. 
  
  
  
  
  41. 
  
  
  
  
  42. 
  
  
  
  
  43. hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/>
    44. 
  
  
  
  
  44. 
  
  
  
  
    46. 
  
  
  
  
  46. 
  
  
  
  
  47. 
  
  
  
  
  48. 
  
  
  
  
  49. hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/>
    50. 
  
  
  
  
  50. 
  
  
  
  
  51. 
  
  
  
  
  52. 
  
  
  
  
    54. 
  
  
  
  
  54. 
  
  
  
  
    56. 
  
  
  
  
  56. 
  
  
  
  
  57. 
  
  
  
  
  58. 
  
  
  
  
  59. 
  
  
  
  
  60. 
  
  
  
  
  61. 
  
  
  
  
  62.

运行该程序，效果如图9-2所示。

 图9-2擦除效果

13）Flex特效之Zoom缩放效果

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

代码清单ZoomSample.mxml

 
 
 
 
    
  
  
  
  
    2. 
  
  
  
  
  2. 
  
  
  
  
    4. 
  
  
  
  
  4. 
  
  
  
  
    6.

本文标题：Flex特效使用大全
当前地址：http://www.shufengxianlan.com/qtweb/news35/367535.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

营销型网站建设知识

同城分类信息

成都广告制作　　 　成都全屋定制　　 　小程序开发公司　　 　重庆水土机房托管　　 　钢筋机械设备　　 　软文平台　　 　成都网络营销　　 　定制网站　　 　租用服务器　　 　成都app制作　　 　重庆网站建设公司　　 　小谭网创广告　　 　成都温江机房　　 　成都网站设计　　 　橡塑保温管　　 　自适应网站建设　　 　成都小程序商城　　 　做网站价格　　 　成都棕树电信机房　　 　做网站公司