如何在Flex应用程序中创建行为及动画效果-MTV学习库

Flex特效说明

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

1.什么是Flex行为

Flex中的()由()和()组成。当用户在界面中执行操作时，例如点击按钮，触发器就会被激活，导致目标组件发生一定的视觉或听觉变化，例如播放逐渐显示的动画或发出声音。触发器可以由用户操作触发，也可以由程序触发。一个触发器可以对应多个效果。

1.1 触发因素和影响

触发器的使用非常简单。它可以作为MXML标签中的属性使用，也可以在标签中调用，也可以使用()和()方法调用。触发器的名称是名称+“”后缀。按照此命名约定，事件的触发器名称为。 Flex 中提供的触发器名称包括以下内容。

：将组件添加到容器时触发。

ect：组件创建时触发。

：组件获得焦点时触发。

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

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

：按下鼠标时触发。

：释放鼠标时触发。

：组件移动时触发。

：当组件被移除时触发。

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

：当鼠标移离组件时触发。

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

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

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

下图9-1分别展示了工厂类和实例类之间的层次关系。 Class是一个抽象基类，是定义所有效果的基本工厂类。 Class 是定义所有效果实例子类的基类。应用程序中不会创建类本身的实例，但会创建子类（例如 Mask 或 Tween）的实例。

图9-1 工厂类和实例类

1.2 简单效果组件

Flex提供了丰富的效果组件。由于效果是一个随着时间的推移而逐渐消失的过程，因此所有效果都具有以毫秒为单位设置播放时间的属性。您还可以通过设置属性和属性来控制效果播放的次数以及效果重复的时间间隔（以毫秒为单位）。如果您想在触发器触发后延迟一段时间调用效果，可以使用属性。

1）Flex特效的动画效果

它用于对组件的属性或样式进行动画处理。我们可以通过属性来设置需要动画的目标对象上的属性，然后设置属性和属性来提供效果的属性的开始和结束值。例如，以下代码使用触发器。单击图像时，会触发效果。在 1 秒内，Image 对象的属性从 1 变为 2，并且水平拉伸。代码如下所示：

   
   <mx:AnimatePropertyidmx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1  
 
"toValue="2" 
 
duration="1000"/> 
 
<mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP  
 
roperty}"/>

如果想通过style来设置效果，可以将该属性设置为true，然后通过()方法设置目标对象的样式，从而达到设置效果的目的。

2）Flex特效Blur效果

模糊是一种模糊效果。此效果使用闪光灯..滤镜。如果对组件应用了模糊效果，则无法将滤镜应用到该组件，并且无法再次应用模糊效果。下面的代码通过Image对象的触发来触发Blur效果。 1秒内，Image对象会逐渐变得模糊。代码如下所示：

   
   <mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0"blurXTo="10.0"  
 
blurYFrom="0.0"blurYTo="10.0"/> 
 
<mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage}"/>

3）Flex特效的溶解效果

这是一种溶解作用。当效果开始播放时，会创建一个漂浮在目标组件上方的不透明矩形。它的颜色由.color属性设置，透明度为“1.0-.”。随着效果播放，矩形的 alpha 属性会逐渐从 (1.0-) 变为“1.0-”，直到效果完成且矩形被破坏。

如果目标对象是容器，则效果将应用于容器内的内容区域。

下面的代码使用一个对象来设置Image的属性，并通过和来触发它们各自的效果：

   
   <mx:Dissolveidmx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"alphaTo="0  
 
.0"/> 
 
<mx:Dissolveidmx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"alphaTo="1.  
 
0"/> 
 
<mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
 
<mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  
 
hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/>

4）Flex特效：淡入淡出效果

Fade是淡入淡出效果，通过设置组件的alpha属性来实现动画效果。使用或触发器设置 Fade 效果时，如果省略和属性的值，则目标对象的透明度将从 0 变为触发器上目标的当前 alpha 值，并从当前 alpha 值在扳机上。更改为 0。如果要对字体使用淡入淡出效果，则必须使用嵌入字体。

下面的代码使用一个对象来设置Image的属性，并通过和触发各自的Fade效果：

   
   <mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/> 
 
<mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/> 
 
<mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
 
<mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"  
 
hideEffect="{fadeOut}"showEffect="{fadeIn}"/>

5）Flex特效的Glow发光效果

Glow 是一种使用 flash.. 滤镜类的发光效果。如果将发光效果应用到组件，则无法将滤镜应用到该组件，也无法再次应用发光效果。下面的代码通过Image对象的触发来触发Glow效果：

   
   <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0"alphaTo="0.3"  
 
blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x  
 
00FF00"/> 
 
<mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/>

6）Flex特效Iris彩虹效果

虹膜效果通过扩展或收缩聚焦在目标上的矩形蒙版来为效果目标设置动画。此效果可以将蒙版从目标中心展开以显示目标，或将蒙版向中心缩小以隐藏目标。下面的代码使用一个对象来设置Image的属性，并通过和触发器触发各自的Iris效果：

   
   <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/> 
 
<mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/> 
 
<mx:Imageidmx:Imageid="Flex"source="assets/plane.png"visible="{cbx.selected}" 
 
showEffect="{irisIn}"hideEffect="{irisOut}"/> 
 
<mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>

7）Flex特效：移动效果

Move效果用于实现移动动画。在给定时间，组件的位置随时间而变化。使用此效果通常需要以下属性。

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

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

lxBy和yBy用于指定移动量，即组件在x轴和y轴方向的移动速度。

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

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

代码清单.mxml

   
   <?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft=  
 
"0"  
 
layout="absolute"mouseDown="moveImage();"> 
 
<mx:Script> 
 
 
 
//当按下鼠标时调用该事件  
 
privatefunctionmoveImage():void{  
 
//停止播放Move效果  
 
moveEffect.end();  
 
//设置目标位置  
 
moveEffect.xTo=mouseX;  
 
moveEffect.yTo=mouseY;  
 
//播放Move效果  
 
moveEffect.play();  
 
}  
 
]]> 
 
mx:Script> 
 
<mx:Moveidmx:Moveid="moveEffect"target="{img}"/> 
 
<mx:Imageidmx:Imageid="img"source="assets/plane.png"/> 
 
mx:Application>

代码中设置的属性是，当用户在应用程序中的任意位置单击鼠标时，调用该方法。该方法中，首先停止Move效果，然后根据鼠标点击的位置设置目标位置，最后播放效果。

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

8）Flex特效的暂停效果

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

9）Flex特效大小调整效果

效果用于更改组件的大小。与移动效果类似，该效果可以指定初始大小 (,)、目标大小 (,) 和变化量 (,)。其使用规则也与移动效果的初始位置、目标位置和移动量的使用规则类似。下面的代码演示了该效果的使用：

   
   <mx:Resizeidmx:Resizeid="expand"target="{img}"widthTo="100"heightTo="160"/> 
 
<mx:Resizeidmx:Resizeid="contract"target="{img}"widthTo="25"heightTo="40"/> 
 
<mx:ControlBar> 
 
<mx:Buttonlabelmx:Buttonlabel="Expand"click="expand.end();expand.play();"/> 
 
<mx:Buttonlabelmx:Buttonlabel="Contract"click="contract.end();contract.play();"/> 
 
mx:ControlBar> 
 
<mx:Imageidmx:Imageid="img"width="25"height="40"source="assets/icon01.png"/>

此外，该属性还用于隐藏Panel 容器的其他子级。当我们对Panel容器中的子项应用效果时，默认情况下，Panel会重复计算子项的大小和位置来调整布局。如果该属性设置为true，则可以让Panel容器在播放动画时不进行此计算，直到播放完成，这样可以节省系统资源。

10) Flex特效旋转效果

是一种旋转效果，使组件绕指定点旋转。您可以指定旋转中心的坐标（和属性）以及旋转的起始角度（属性）和最终角度（属性）。起始旋转角度的有效值范围为 0~360，最终角度可以为正值或负值，默认值为 360。如果的值小于的值，则目标旋转逆时针方向旋转，否则顺时针方向旋转。代码如下所示：

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

有时还需要设置属性来确定效果在开始播放时是否应隐藏聚焦环。该属性的默认值为 true。对于组件，对焦环已自动隐藏。如果该效果应用于不属于基类的对象，则必须隐藏聚焦环。

需要注意的是，基于基类的效果类中该属性的默认值为false，而基于基类的效果类中，默认值为true。

11）Flex特效音效

效果器用于播放MP3音频文件。我们可以通过属性指定要播放的MP3文件，直接设置文件的URL，或者使用Embed关键字嵌入MP3文件的Class对象。

该效果的属性包括以下内容。

该属性用于设置是否自动加载MP3文件。默认值是true。

属性用于设置声音对象的缓冲时间。默认值为 1000（以毫秒为单位）。

如果 MP3 已加载，则此属性为 true。

该属性用于设置循环次数，默认值为0。

属性用于设置声音均衡效果的缓动功能。

属性和 panTo 属性用于设置声音对象的起始和最终翻译。值范围在-1.0和1.0之间，其中-1.0表示仅使用左声道，1.0表示仅使用右声道，0.0表示使用2个声道之间均匀地平衡声音。

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

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

属性用于设置开始播放时间（以毫秒为单位），默认值为0。

该属性表示是否按照该属性指定的时间停止播放。如果为 false，则效果将在 MP3 完成播放或循环后停止。默认值是true。

n属性用于设置音量效果的缓动函数。

属性和属性用于设置声音对象的初始和最终音量。取值范围为0.0～1.0，默认值为1。

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

代码清单.mxml

   
   <?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
 
creationCompleteEffect="{mySound}"> 
 
<mx:SoundEffectidmx:SoundEffectid="mySound" 
 
duration="10000" 
 
useDuration="false" 
 
panFrom="-1"panTo="1"  
 
source="@Embed(source='assets/bumperc.mp3')"/> 
 
mx:Application>

12）Flex特效、、、擦除效果

这些类定义了 4 个方向的擦除效果。它们通常与触发器结合使用，并且非常易于使用，如下例所示。

代码清单.mxml

   
    <?xmlversionxmlversion="1.0"?> 
 
<mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"> 
 
 
 
<mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/> 
 
<mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/> 
 
<mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/> 
 
<mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/> 
 
<mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/> 
 
<mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/> 
 
<mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/> 
 
<mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/> 
 
<mx:Paneltitlemx:Paneltitle="WipeEffects"> 
 
<mx:HBoxwidthmx:HBoxwidth="100%"> 
 
 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/> 
 
 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/> 
 
 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/> 
 
 
 
<mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se  
 
lected}"  
 
hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/> 
 
mx:HBox> 
 
<mx:ControlBar> 
 
<mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 
 
mx:ControlBar> 
 
mx:Panel> 
 
mx:Application>

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

图9-2 擦除效果

13）Flex特效Zoom缩放效果

缩放效果可以围绕指定点按比例缩放对象。与效果的区别在于改变了目标物体的长宽属性，而Zoom则改变了目标物体的缩放比例。在下面的示例中，当鼠标移到图像上时，缩放效果开始播放，并在鼠标移出时恢复。

代码清单.mxml

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

给这篇文章的作者打赏

相关文章

看看自己的屁股擦干净了没，且行且珍惜哟

最爱安卓游戏酷一套完整的数据包下载流程

粉色㔀院免费视频观看应用，随时随地都可以观看