Flex 中在表单(Form组件)上填加动画效果(Effect)_综合

核心提示:FormItem的 visible 和 includeInLayout 属性就绑定到这个 advanced 值上, 前者负责显示和隐藏，后者负责计算位置，可以看一下文档...

首先我们建立了一个 private bindable 变量叫做 "advanced" 当点击"Toggle" 按钮时这个值就会改变。

FormItem的 visible 和 includeInLayout 属性就绑定到这个 advanced 值上, 前者负责显示和隐藏，后者负责计算位置，可以看一下文档：）

要注意的是Effect是放在FormItem中的。

完整代码在下边：

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
>
<mx:Script>
<![CDATA[
import mx.effects.easing.Bounce;
import mx.controls.Alert;

[Bindable] private var advanced : Boolean = false;

private function onClick() : void
{

//only toggle if not playing
if( !ef_move.isPlaying )
{

advanced = !advanced;

}

}

]]>
</mx:Script>


<mx:Move
id = "ef_move"
easingFunction="Bounce.easeOut"
/>

<mx:Panel
title = "Form Example"
width = "300"
height = "350"

>

<mx:Form
width = "100%"
height = "100%"
>

<mx:FormItem>

<mx:Button
label = "Toggle Form"
click = "onClick()"
width = "140"
/>

</mx:FormItem>

<mx:FormItem
label = "First Name:"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Last Name:"
moveEffect = "ef_move"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Email:"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 1:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 2:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Address 3:"
visible = "{advanced}"
includeInLayout = "{advanced}"
showEffect = "Fade"
moveEffect = "ef_move"
>

<mx:TextInput />

</mx:FormItem>

<mx:FormItem
label = "Password:"
moveEffect = "ef_move"
>

<mx:TextInput displayAsPassword="true" />

</mx:FormItem>

<mx:FormItem
moveEffect = "ef_move"
>

<mx:Button
label = "Send Info!"
click = "Alert.show('I hope you like my example!');"
/>

</mx:FormItem>

</mx:Form>

</mx:Panel>

</mx:Application>

加不加弹性效果区别就在于：

如果你想加个easing 效果(Back, Bounce, Elastic, etc)，只要指定Move的easingFunction就可以了。

<mx:Script>
<![CDATA[

import mx.effects.easing.Bounce;

]]>
</mx:Script>

<mx:Move id = "ef_move" easingFunction="Bounce.easeOut" />