您的位置：首页 > Web前端

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

2011-08-25 11:36 302 查看

核心提示: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" />

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： flex application button import encoding 文档

相关文章推荐

新的分享

章节导航