flex卡通效果

flex动画效果

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

6.2 行为和组件

6.2.1 组件的行为和动画效果

UIComponent 是所有组件的父类，定义了组件共有的属性和方法，其中包括行为触发器：
effectStart 和 effectEnd 是动画效果共有的事件，分别在动画的开始和结束时被激发。

<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
repeatCount 和 repeatDelay 也是共有属性，分别表示动画播放的次数和每次都间隔时间
Xml代码：

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

查看更多 下一篇