flex动画效果

来源：互联网发布：淘宝管制刀具的定义编辑：程序博客网时间：2024/05/16 09:51

6.1 认识行为对象

6.1.1 什么是行为对象

行为对象可以看作是触发器(Trigger) 和动画效果(Effect) 的结合体。
触发器和事件并不相同，针对一个事件的触发器，受到事件的制约。事件可以被监听，而触发器不可以。
组件定义了多种触发器，成为本身的一个属性，这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果，当触发器被激活，这些动画会按某种顺序运行。

6.1.2 创建行为

Move 标签：将target 指定的作用目标 img图片从xFrom 移动到 xTo 位置，duration 表示持续的时间（单位：毫秒）。

Xml代码

<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来完成行为的创建：

Xml代码

view plaincopy to clipboardprint?

<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当组件完成绘制时触发removedEffectremoved当组件从容器中删除时触发focusInEffectfocusIn当组件获得焦点时触发focusOutEffectfocusOut当组件失去焦点时触发hideEffecthide当组件变成不可见时触发showEffectshow当组件变成可见时触发mouseDownEffectmouseDown当鼠标在组件上按下时触发mouseUpEffectmouseUp当鼠标在组件上松开时触发rollOutEffectrollOut当鼠标在组件上移开时触发rollOverEffectrollOver当鼠标移到组件上时触发moveEffectmove当组件被移动时触发resizeEffectresize当组件大小改变时触发

所有的动画效果都是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代码

view plaincopy to clipboardprint?

<?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>
<?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>

<?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>              </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定义效果：

view plaincopy to clipboardprint?

<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设置样式

view plaincopy to clipboardprint?

<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"/>