Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件

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 是所有组件的父类，定义了组件共有的属性和方法，其中包括行为触发器：

触发器名词	对应的事件名词	事件描述
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"/>