6.1 认识行为对象
6.1.1 什么是行为对象
行为对象可以看作是触发器(Trigger) 和动画效果(Effect) 的结合体。
触发器和事件并不相同,针对一个事件的触发器,受到事件的制约。事件可以被监听,而触发器不可以。
组件定义了多种触发器,成为本身的一个属性,这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果,当触发器被激活,这些动画会按某种顺序运行。
6.1.2 创建行为
Move 标签:将target 指定的作用目标 img图片 从xFrom 移动到 xTo 位置,duration 表示持续的时间(单位:毫秒)。
- play(targets:Array = null,playReversedFromEnd:Boolean=false):开始播放,targets:一组目标对象,这将覆盖原来的目标对象。playReversedFromEnd:是否逆向播放。
- end():停止播放动画
- pause():暂停动画
- resume():当暂停时,继续播放
- reverse():逆向播放动画,如果动画正在播放,则从当前位置开始逆向播放。
我们也可以使用AS来完成行为的创建:
?
6.2 行为和组件
6.2.1 组件的行为和动画效果
UIComponent 是所有组件的父类,定义了组件共有的属性和方法,其中包括行为触发器:
触发器名词
|
对应的事件名词
|
事件描述
|
addedEffect
|
added
|
当被添加到容器中时触发
|
createCompleteEffect
|
createComplete |
当组件完成绘制时触发 |
removedEffect |
removed |
当组件从容器中删除时触发 |
focusInEffect |
focusIn |
当组件获得焦点时触发 |
focusOutEffect |
focusOut |
当组件失去焦点时触发 |
hideEffect |
hide |
当组件变成不可见时触发 |
showEffect |
show |
当组件变成可见时触发 |
mouseDownEffect |
mouseDown |
当鼠标在组件上按下时触发 |
mouseUpEffect |
mouseUp |
当鼠标在组件上松开时触发 |
rollOutEffect |
rollOut |
当鼠标在组件上移开时触发 |
rollOverEffect |
rollOver |
当鼠标移到组件上时触发 |
moveEffect |
move |
当组件被移动时触发 |
resizeEffect |
resize |
当组件大小改变时触发 |
所有的动画效果都是Effcet 类的子类,位于 mx.Effects 包中:
Effect 名称
|
动画效果描述
|
AnimateProperty
|
针对组件的一个以数字计算的属性,比如长度, 按给定的起始值逐渐改变属性的大小。
|
Blur
|
模糊效果。可以让组件变得模糊,核心由 BlurFilter 滤镜完成。 当对组件使用了该效果,不可再使用 Blur 滤镜和其他模糊效果。
|
Fade
|
淡入淡出效果。 注意:当目标对象中包括文字时,必须使用嵌入字体。
|
Dissolve
|
溶解效果,主要是在目标对象上增加覆盖层,改变覆盖层的透明度,达到让目标消失或出现的效果。 和 Fade 效果相比,它可以设置覆盖层的颜色。 注意:当目标对象中包括文字时,必须使用嵌入字体。
|
Glow
|
发光效果,使用了GlowFilter 滤镜。 当对组件使用了该效果,不可再使用GlowFilter 滤镜和其他发光效果。
|
Iris
|
彩虹效果,组件以矩形方式,从中心放大或缩小到中心。 属于遮罩效果。
|
Move
|
移动效果,移动组件的坐标,只有当组件位于支持绝对定位的容器中时才有效。
|
Pause
|
停止,什么都不改变,没有动画。 一般用于复合动画效果中,用来分割前后两个动画。
|
Resize
|
尺寸调整效果,改变组件的长和宽。 当改变组件的长和宽时,处于同一个容器的其他组件的大小也可能会相应改变,如果该容器使用了绝对定位则不会发生这种情况。
|
Rotate
|
旋转效果。
|
SoundEffect
|
注意:当目标对象中包括文字时,必须使用嵌入字体。 |
WipeLeft WipeRight WipeUp WipeDown
|
擦除效果,属于遮罩效果。 对应不同方向。
|
Zoom
|
放缩效果,以组件为中心进行放缩。
|
6.2.2 为组件添加行为--监听动画的执行
<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
effectStart 和 effectEnd 是动画效果共有的事件,分别在动画的开始和结束时被激发。
<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
repeatCount 和 repeatDelay 也是共有属性,分别表示动画播放的次数和每次都间隔时间
Xml代码
通过CSS定义效果:
通过setstyle设置样式