flex 3 用户界面定义状态过渡效果如何添加
flex 3 用户界面定义状态过渡效果如何添加
看看标题就是说在状态转换的时候中间增加一种效果，
做的时候要注意需要引入一些效果类，然后就是增加<mx:transitions>标签，里面再定义<mx:Transition>标签并且设置 fromState和toState，需要转换的状态从哪个到哪个之间要转换，*代表任意，接着是<mx:Parallel>标签并行效果 和 <mx:Sequence>按顺序播放的效果，这两个里面targets表示要作用的对象，另外target和targets区别是一个和多个对象区别，然后就是<mx:Resize>标签是具体效果标签，还有其它的效果使用另外标签，以上仅是我个人的理解
具体接上篇文章本文例子如下：（可以<mx:Sequence target="{confirm}">把confirm改为loginPanel比较效果有什么不同）
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
<![CDATA[
// 这个效果必须导入 easing 类
// 而且这个只能用在MXML中.
import mx.effects.easing.Bounce;
]]>
</mx:Script>
<mx:transitions>
<mx:Transition fromState="*" toState="*">
<!-- Parallel effects execute in unison -->
<mx:Parallel targets="{[loginPanel, registerLink, loginButton, confirm]}">
<mx:Resize duration="500" easingFunction="Bounce.easeOut"/>
<!--
这里这个效果只作用于对象id的confirm确认密码那里,如果把confirm改为loginPanel是这个登陆效果变化
-->
<mx:Sequence target="{confirm}">
<mx:Blur duration="200" blurYFrom="1.0" blurYTo="20.0" />
<mx:Blur duration="200" blurYFrom="20.0" blurYTo="1" />
</mx:Sequence>
</mx:Parallel>
</mx:Transition>
</mx:transitions>
<mx:states>
<mx:State name="Register">
<mx:SetProperty target="{loginPanel}" name="title" value="注册"/>
<mx:SetProperty target="{formheading1}" name="label" value="注册表单表头名称"/>
<mx:AddChild relativeTo="{loginForm}" position="lastChild">
<mx:FormItem id="confirm" label="确认密码:">
<mx:TextInput/>
</mx:FormItem>
</mx:AddChild>
<mx:SetProperty target="{registerLink}" name="label" value="返回登陆"/>
<mx:SetProperty target="{loginButton}" name="label" value="注册"/>
<mx:SetEventHandler target="{registerLink}" name="click" handler="currentState=''"/>
</mx:State>
</mx:states>
<mx:Panel id="loginPanel" title="初始状态登陆页面" x="82" y="63" width="315" height="210" layout="absolute">
<mx:Form id="loginForm">
<mx:FormHeading label="表单表头名称" id="formheading1"/>
<mx:FormItem label="用户名：">
<mx:TextInput/>
</mx:FormItem>
<mx:FormItem label="密码：">
<mx:TextInput/>
</mx:FormItem>
</mx:Form>
<mx:ControlBar>
<mx:LinkButton label="需要注册" id="registerLink" click="currentState='Register'"/>
<mx:Spacer width="100%" id="spacer1"/>
<mx:Button label="登录" id="loginButton"/>
</mx:ControlBar>
</mx:Panel>
</mx:Application>
原创文章转载请注明出处：云飞扬IT的blog
