没有合适的资源?快使用搜索试试~ 我知道了~
资源推荐
资源详情
资源评论
Flex 的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用
户界面更加丰富多彩。本章将介绍如何在 Flex 应用程序中创建行为及动画效果。
9.1 什么是行为
Flex 中的行为(Behavior)是由触发器(Trigger)和效果(Effect)组合而成。
当用户在界面中进行某项操作时,如单击某个按钮,触 发器会被激活,从而使
目标组件发生某些视觉或听觉上的变化,例如播放一段逐渐显示的动画或发出声
响等。触发器可以由用户操作触发,也可以由程序触发,一个 触发器可以对应
多个效果。
9.1.1 触发器与效果
触发器的使用非常简单,可以作为 MXML 标记中的一个属性,也可以在<mx:Style>
标记中调用,或者在 ActionScript 中用 setStyle()和 getStyle()方法调用。
触发器的名称为 triggerEvent 名称 + “Effect”后缀。按照这种名称约定,
mouseDown 事件的触发器名称为 mouseDownEffect。Flex 中提供的触发器名称包
括以下几 种。
l addedEffect:当组件添加到容器中时触发。
l creationCompleteEffect:组件创建完毕时触发。
l focusInEffect:组件获得焦点时触发。
l focusOutEffect:组件失去焦点时触发。
l hideEffect:当组件的 visible 属性更改为 false 时触发。
l mouseDownEffect:按下鼠标时触发。
l mouseUpEffect:释放鼠标时触发。
l moveEffect:组件移动时触发。
l removedEffect:组件被移除时触发。
l resizeEffect:组件改变大小时触发。
l rollOutEffect:鼠标从组件上移开时触发。
l rollOverEffect:鼠标移动到组件上时触发。
l showEffect:组件的 visible 属性更改为 true 时触发。
Flex 的动画效果由一个工厂类(Factory)和一个实例类(Instance)构成。工
厂类用来处理事件、控制动画,它的名称就是效果的名称,如 Zoom。通常我们
在应用程序中创建一个工厂类的实例,设置必要的参数,然后将该实例与触发器
关联。实例类则用来实现动画效果,当触发器被触发或调用 play()方法时,工
厂类创建一个实例类的实例来播放所需效果,执行结束后,该实例会被销毁,如
果一个效果对应多个目标对象,每一个目标对象都会有一个 自己的实例。实例
类的命名规则为效果名+Instance。如之前定义的工厂类名为 Zoom,那么实例类
名就是 ZoomInstance。Effect 的 这种机制,是设计模式中工厂模式的一种应用,
效果执行的时候,运行的不是 Zoom,而是 ZoomInstance。
下面的图 9-1 分别表现了工厂类和实例类的层级关系。Effect 类是一个抽象基
类,是定义所有效果的基本工厂类。EffectInstance 类是定义 所有效果实例子
类的基类。在应用程序中不会创建 Effect 类本身的实例,而是创建一个子类的
实例,如 Mask 或 Tween。
图 9-1 工厂类与实例类
9.1.2 简单效果组件
Flex 中提供了丰富的效果组件。由于效果是一种根据时间渐变的过程,因此所
有效果都具有 duration 属性,用来设置播放时间(以毫秒为单位)。也可 以通
过设置 repeatCount 属性和 repeatDelay 属性,来分别控制效果播放的次数和重
复播放效果的时间间隔(以毫秒为单位)。如果希望在触 发器被触发后,延迟
一段时间调用效果,可以使用 startDelay 属性。
1
11
1)
))
)AnimateProperty
AnimatePropertyAnimateProperty
AnimateProperty 动画效果
动画效果动画效果
动画效果
AnimateProperty 是用来为组件的属性或样式设置动画的效果。我们可以通过其
property 属性设定目标对象上需要设置动画效果的属性,然 后设置 fromValue
属性和 toValue 属性,为效果提供属性的起始值和结束值。例如下面的代码使用
mouseDownEffect 触发器,当单击 图片时,触发 AnimateProperty 效果,在 1
秒钟内,Image 对象的 scaleX 属性由 1 变为 2,被横向拉伸。代码如下:
<mx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1
" toValue="2"
duration="1000" />
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP
roperty}"/>
如果希望通过样式设置效果,可以将 isStyle 属性设置为 ture,然后通过
setStyle()方法设置目标对象的样式,从而达到设置效果的目的。
2
22
2)
))
)Blur
BlurBlur
Blur 模糊效果
模糊效果模糊效果
模糊效果
Blur 是一种模糊效果。该效果使用了 flash.filters.BlurFilter 滤镜,如果
对某个组件应用了 Blur 效果,就不能再对该组件应用 BlurFilter 滤镜,也无
法再次应用 Blur 效果。下面的代码通过 Image 对象的 mouseDownEffect 触发 器
触发 Blur 效果,在 1 秒钟内,Image 对象将逐渐变得模糊。代码如下:
<mx:Blur id="blurImage" duration="1000" blurXFrom="0.0" blurXTo="10.0"
blurYFrom="0.0" blurYTo="10.0"/>
<mx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage
}"/>
3
33
3)
))
)Dissolve
DissolveDissolve
Dissolve 溶解效果
溶解效果溶解效果
溶解效果
Dissolve 是一种溶解效果。当效果开始播放时,将创建一个不透明的矩形,这
个矩形悬浮在目标组件的上方,它的颜色由 Dissolve.color 属 性设置,此时透
明度为“1.0 - Dissolve.alphaFrom”。随着效果的播放,该矩形的 alpha 属性
将从(1.0 - alphaFrom)逐渐变为“1.0 – alphaTo”,直到效果播放完成,矩
形被销毁。
如果目标对象是一个容器,那么 Dissolve 效果将应用于容器内部的内容区域。
下面的代码使用一个 CheckBox 对象设置 Image 的 visible 属性,通过 hideEffect
和 showEffect 触发器分别触发各自的 Dissolve 效果:
<mx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"alphaTo="0
.0"/>
<mx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"alphaTo="1.
0"/>
<mx:CheckBox id="cbx" label="visible" selected="true"/>
<mx:Image source="assets/plane.png" visible="{cbx.selected}"
hideEffect="{dissolveOut}" showEffect="{dissolveIn}"/>
4
44
4)
))
)Fade
FadeFade
Fade 淡入淡出效果
淡入淡出效果淡入淡出效果
淡入淡出效果
Fade 是一种淡入淡出效果,它通过设置组件的 alpha 属性来实现动画效果。当
使用 showEffect 或 hideEffect 触发器设置 Fade 效果 时,如果省略了 alphaFrom
和 alphaTo 属性的值,那么在 showEffect 触发器上目标对象的透明度将从 0 变
化到目标的当前 alpha 值,而在 hideEffect 触发器上则会从当前的 alpha 值变
剩余11页未读,继续阅读
资源评论
richardwhx
- 粉丝: 0
- 资源: 2
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功