首先我们建立了一个 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>
<!-- this is the move effect I am using -->
<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" />
|
