6.1 认识行为对象
6.1.1 什么是行为对象
行为对象可以看作是触发器(Trigger) 和动画效果(Effect) 的结合体。
触发器和事件并不相同,针对一个事件的触发器,受到事件的制约。事件可以被监听,而触发器不可以。
组件定义了多种触发器,成为本身的一个属性,这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果,当触发器被激活,这些动画会按某种顺序运行。
触发器和事件并不相同,针对一个事件的触发器,受到事件的制约。事件可以被监听,而触发器不可以。
组件定义了多种触发器,成为本身的一个属性,这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果,当触发器被激活,这些动画会按某种顺序运行。
6.1.2 创建行为
Move 标签:将target 指定的作用目标 img图片 从xFrom 移动到 xTo 位置,duration 表示持续的时间(单位:毫秒)。
- <mx:Move id="myMove" target="{img}" xFrom="50" xTo="150" duration="2000"/>
- <mx:Image id="img" x="53" y="53" source="tree.jpg"/>
- <mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
所有动画对象都继承 Effect 对象。抽象类,定义了以下方法来控制动画的播放流程:
- play(targets:Array = null, playReversedFromEnd:Boolean=false):开始播放,targets:一组目标对象,这将覆盖原来的目标对象。playReversedFromEnd:是否逆向播放。
- end():停止播放动画
- pause():暂停动画
- resume():当暂停时,继续播放
- reverse():逆向播放动画,如果动画正在播放,则从当前位置开始逆向播放。
我们也可以使用AS来完成行为的创建:
- <mx:Script>
- <![CDATA[
- import mx.effects.Move;
- private var myMove:Move;
- internal function initApp():void{
- myMove = new Move();
- myMove.xFrom = 50;
- myMove.xTo = 150;
- myMove.duration = 2000;
- myMove.target = img
- }
- ]]>
- </mx:Script>
- <mx:Image id="img" x="53" y="53" source="tree.jpg"/>
- <mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
6.2 行为和组件
6.2.1 组件的行为和动画效果
UIComponent 是所有组件的父类,定义了组件共有的属性和方法,其中包括行为触发器:
所有的动画效果都是Effcet 类的子类,位于 mx.Effects 包中:
触发器名词 | 对应的事件名词 | 事件描述 |
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 version="1.0" encoding="utf-8"?>
- <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
- creationComplete="initApp()">
- <mx:Style source="style.css" />
- <mx:Script>
- <![CDATA[
- internal function effectStartHandler():void{
- tip_txt.text = "提示信息:动画开始了";
- }
- internal function effectEndHandler():void{
- tip_txt.text = "提示信息:动画结束了";
- }
- ]]>
- </mx:Script>
- <mx:ApplicationControlBar dock="true">
- <mx:Label id="tip_txt" text="提示信息:" width="219" styleName="label"/>
- </mx:ApplicationControlBar>
- <mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
- <mx:WipeLeft id= "myWipe" />
- <mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
- <mx:Image id="image" x="35" y="43" source="tree.jpg" showEffect="myIris" hideEffect="myIris"/>
- <mx:Image id="image2" x="170" y="43" source="tree.jpg" showEffect="myWipe" hideEffect="myWipe2"/>
- <mx:Button label="改变图片" x="37" y="153" click="image.visible = image2.visible= !image.visible"/>
- </mx:Application>
可以通过CSS样式来设定组件的行为:
- <mx:Style>
- .image{
- showEffect: myIris;
- hideEffect: myIris;
- }
- .image2{
- showEffect: myWipe2;
- hideEffect: myWipe;
- }
- </mx:Style>
- <mx:Image id="image" x="35" y="43" source="tree.jpg" styleName="image"/>
- <mx:Image id="image2" x="170" y="43" source="tree.jpg" styleName="image2"/>
或者通过setStyle 来设置样式:
- <mx:Script>
- <![CDATA[
- internal function initApp():void{
- image.setStyle("showEffect",myIris);
- image.setStyle("hideEffect",myIris);
- image2.setStyle("showEffect",myWipe2);
- image2.setStyle("hideEffect",myWipe);
- }
- ]]>
- </mx:Script>
- <mx:Image id="image" x="35" y="43" source="tree.jpg“/>
- <mx:Image id="image2" x="170" y="43" source="tree.jpg"/>