《【2017年整理】flex各种效果演示》由会员分享，可在线阅读，更多相关《【2017年整理】flex各种效果演示（12页珍藏版）》请在金锄头文库上搜索。
1、Flex 的行为机制使得开发者可以很方便地为应用程序添加动画效果，从而使用户界面更加丰富多彩。本章将介绍如何在 Flex 应用程序中创建行为及动画效果。9.1 什么是行为Flex 中的行为（Behavior）是由触发器（Trigger）和效果（Effect）组合而成。当用户在界面中进行某项操作时，如单击某个按钮，触 发器会被激活，从而使目标组件发生某些视觉或听觉上的变化，例如播放一段逐渐显示的动画或发出声响等。触发器可以由用户操作触发，也可以由程序触发，一个 触发器可以对应多个效果。9.1.1 触发器与效果触发器的使用非常简单，可以作为 MXML 标记中的一个属性，也可以在标记中调用，或者在
2、ActionScript 中用 setStyle()和 getStyle()方法调用。触发器的名称为 triggerEvent 名称 + “Effect”后缀。按照这种名称约定，mouseDown 事件的触发器名称为 mouseDownEffect。Flex 中提供的触发器名称包括以下几 种。l addedEffect：当组件添加到容器中时触发。l creationCompleteEffect：组件创建完毕时触发。l focusInEffect：组件获得焦点时触发。l focusOutEffect：组件失去焦点时触发。l hideEffect：当组件的 visible 属性更改为 false
3、时触发。l mouseDownEffect：按下鼠标时触发。l mouseUpEffect：释放鼠标时触发。l moveEffect：组件移动时触发。l removedEffect：组件被移除时触发。l resizeEffect：组件改变大小时触发。l rollOutEffect：鼠标从组件上移开时触发。l rollOverEffect：鼠标移动到组件上时触发。l showEffect：组件的 visible 属性更改为 true 时触发。Flex 的动画效果由一个工厂类（Factory）和一个实例类（Instance）构成。工厂类用来处理事件、控制动画，它的名称就是效果的名称，如 Zoom。
4、通常我们在应用程序中创建一个工厂类的实例，设置必要的参数，然后将该实例与触发器关联。实例类则用来实现动画效果，当触发器被触发或调用 play()方法时，工厂类创建一个实例类的实例来播放所需效果，执行结束后，该实例会被销毁，如果一个效果对应多个目标对象，每一个目标对象都会有一个 自己的实例。实例类的命名规则为效果名+Instance。如之前定义的工厂类名为 Zoom，那么实例类名就是 ZoomInstance。Effect 的 这种机制，是设计模式中工厂模式的一种应用，效果执行的时候，运行的不是 Zoom，而是 ZoomInstance。下面的图 9-1 分别表现了工厂类和实例类的层级关系。Ef
5、fect 类是一个抽象基类，是定义所有效果的基本工厂类。EffectInstance 类是定义 所有效果实例子类的基类。在应用程序中不会创建 Effect 类本身的实例，而是创建一个子类的实例，如 Mask 或 Tween。图 9-1 工厂类与实例类9.1.2 简单效果组件Flex 中提供了丰富的效果组件。由于效果是一种根据时间渐变的过程，因此所有效果都具有 duration 属性，用来设置播放时间（以毫秒为单位）。也可 以通过设置 repeatCount 属性和 repeatDelay 属性，来分别控制效果播放的次数和重复播放效果的时间间隔（以毫秒为单位）。如果希望在触 发器被触发后，延迟一
6、段时间调用效果，可以使用 startDelay 属性。1）AnimateProperty 动画效果 AnimateProperty 是用来为组件的属性或样式设置动画的效果。我们可以通过其 property 属性设定目标对象上需要设置动画效果的属性，然 后设置fromValue 属性和 toValue 属性，为效果提供属性的起始值和结束值。例如下面的代码使用 mouseDownEffect 触发器，当单击 图片时，触发AnimateProperty 效果，在 1 秒钟内，Image 对象的 scaleX 属性由 1 变为 2，被横向拉伸。代码如下：如果希望通过样式设置效果，可以将 isStyle
7、 属性设置为 ture，然后通过setStyle()方法设置目标对象的样式，从而达到设置效果的目的。2）Blur 模糊效果Blur 是一种模糊效果。该效果使用了 flash.filters.BlurFilter 滤镜，如果对某个组件应用了 Blur 效果，就不能再对该组件应用 BlurFilter 滤镜，也无法再次应用 Blur 效果。下面的代码通过 Image 对象的 mouseDownEffect 触发 器触发 Blur 效果，在 1 秒钟内，Image 对象将逐渐变得模糊。代码如下：3）Dissolve 溶解效果Dissolve 是一种溶解效果。当效果开始播放时，将创建一个不透明的矩形，
8、这个矩形悬浮在目标组件的上方，它的颜色由 Dissolve.color 属 性设置，此时透明度为“1.0 - Dissolve.alphaFrom”。随着效果的播放，该矩形的 alpha属性将从(1.0 - alphaFrom)逐渐变为“1.0 alphaTo”，直到效果播放完成，矩形被销毁。如果目标对象是一个容器，那么 Dissolve 效果将应用于容器内部的内容区域。下面的代码使用一个 CheckBox 对象设置 Image 的 visible 属性，通过hideEffect 和 showEffect 触发器分别触发各自的 Dissolve 效果：4）Fade 淡入淡出效果Fade 是一种
9、淡入淡出效果，它通过设置组件的 alpha 属性来实现动画效果。当使用 showEffect 或 hideEffect 触发器设置 Fade 效果 时，如果省略了alphaFrom 和 alphaTo 属性的值，那么在 showEffect 触发器上目标对象的透明度将从 0 变化到目标的当前 alpha 值，而在 hideEffect 触发器上则会从当前的 alpha 值变化到 0。如果要对字体使用 Fade 效果，必须使用嵌入字体。下面的代码使用一个 CheckBox 对象设置 Image 的 visible 属性，通过hideEffect 和 showEffect 触发器分别触发各自的 F
10、ade 效果：5）Glow 发光效果Glow 是一种发光效果，该效果使用了 flash.filters.GlowFilter 滤镜类。如果对某个组件应用了 Glow 效果，就不能对该组件应用 GlowFilter 滤镜，也无法再次应用 Glow 效果。下面的代码通过 Image 对象的 mouseDownEffect 触发器触发 Glow 效果：6）Iris 虹效果Iris 效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果可以从目标的中心放大遮罩来显示目标，也可以向中心收缩遮罩来隐藏目标。下 面的代码使用一个 CheckBox 对象设置 Image 的 visible 属性，
11、通过hideEffect 和 showEffect 触发器分别触发各自的 Iris 效果：7）Move 移动效果Move 效果用来实现移动动画。在给定时间内，组件的位置会随时间变化而变化。使用该效果通常需要用到以下几个属性。l xFrom 和 yFrom 属性用来指定初始位置。l xTo 和 yTo 属性用来指定目标位置。l xBy 和 yBy 用来指定移动量，即组件在 x 轴向和 y 轴向上的移动速度。通常只需要指定初始位置、目标位置或移动量这些值中的任意 2 个， Flex 就会计算第 3 个值。如果指定所有这 3 个值，Flex 就会忽略 xBy 和 yBy 值。如果仅指定 xTo 和
12、yTo 值或 xBy 和 yBy 值，那么 Flex 会将 xFrom 和 yFrom 设置为对象的当前位置。下面的程序演示了如何使用 Move 效果。代码清单 MoveSample.mxml代码中将 Application 的 layout 属性设置为 absolute，当用户在应用程序中任何位置上单击鼠标时，调用 moveImage 方法，该方法中首先停止 Move 效果，然后根据鼠标单击的位置设置目标位置，最后播放效果。通常 Move 效果应用于使用绝对定位的容器（如 Canvas）或使用“layout=absolute”的容器（如 Application 或 Panel）中。如果需要将
13、其应用到自动布局的容器（如 VBox 或 Grid 容器）中，虽然会移动目标对象，但下次容器更新其布局时，会将目标对象移回其原始位置。在这种情况下，可以将容器的 autoLayout 属性设置 为 false 来禁止往回移动，但这会禁用容器中所有控件的布局。8）Pause 暂停效果Pause 效果可以实现在指定时间段内不执行任何操作的功能。如果将 Pause 效果添加为 Sequence 效果的子项，可以创建 2 个其他效果之间的暂停。9）Resize 大小调整效果Resize 效果用来改变组件的大小。与 Move 效果相似，Resize 效果可以指定初始大小（widthFrom、height
14、From）、目标大小 （widthTo、heightTo）和变化量（widthBy、heightBy），其使用规则也与 Move 效果的初始位置、目标位置和移动量的使用规 则相似。下面的代码演示了 Resize 效果的使用方法：另 外 hideChildrenTargets 属性用来隐藏 Panel 容器的其他子项，当我们对 Panel 容器中的子项应用 Resize 效果时，默认情况下 Panel 会反复计算子项的大小和位置以调整布局，如果将这个属性设为 true，可以让 Panel 容器在播放动画时不做这种计算，直到播放完成，这样可以 节约系统资源。10）Rotate 旋转效果Rotate
15、 是一种旋转效果，使组件围绕指定的点旋转。Rotate 可以指定旋转中心的坐标（originX 和 originY 属性）及旋转的起始角度 （angleFrom 属性）和最终角度（angleTo 属性）。起始旋转角度的有效值范围是 0360，而最终角度则可以是正值也可以是负值，默认值为 360。如果 angleTo 的值比angleFrom 的值小，则目标沿逆时针方向旋转，否则以顺时针方向旋转。代码如下：另外有时需要设置 hideFocusRing 属性，以确定在开始播放效果时，效果是否应隐藏对焦环。该属性默认值为 true。对于组件而言，对焦环已经被自动隐藏。如果 Rotate 效果应用于那
16、些不是以 UIComponent 为基类目标对象，就必须隐藏对焦环。需要注意的是， hideFocusRing 属性在以 Effect 为基类的效果类中，默认值为 false，而在以 MaskEffect 为基类效果类中，默认值为 true。11）SoundEffect 声音效果SoundEffect 效果用来播放 MP3 音频文件。我们可以通过 source 属性指定要播放的 MP3 文件，可以直接设置该文件的 URL，或是由 Embed 关键字嵌入 MP3 文件的 Class 对象。SoundEffect 效果的属性包括以下几个。l autoLoad 属性用来设置是否自动加载 MP3 文件，默认值为 true。l bufferTime 属性用来设置声音对象的缓冲时间。默认值为 1000，单位为毫秒。l isLoading 如果已加载 MP3，则该属性为 true。l loops 属性用来设置循环次数，默认值为 0。l panEasingFunction 属性用来设置声音均衡效果的缓动函数。l panFrom 属性和 panTo
