• 【设为首页】
  • 【收藏闪客居】
当前位置:主页>Flex>文章内容
  • Flex 中在表单(Form组件)上填加动画效果(Effect)
  • 来源:N神AS研究所 作者:N神AS研究所 2008-03-13 【

下面的实例中,有一个表格( Form ),这个 Form 有一个高级模式 ,当选择高级模式后会出现更多额外的文本框给用户填写。
就像下边演示中看到的一样,当你点击"Toggle Form" 按钮时额外的文本框会显示或者隐藏
先看演示:


同样再加一个弹性效果 :)



首先我们建立了一个 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" />

查看MXML

此文已经被收录在 《Flex 3 常见组件使用技巧系列 》中,点此进入该主题。



上一篇:在Flex中当组件的visible值改变时引发一个动画效果(Effect)   下一篇:使用ArrayCollection的filterFunction属性过滤DataGrid
  • 用户名:新注册) 密码: 匿名评论
  • 评论内容:(不能超过250字,需审核后才会公布,请自觉遵守互联网相关政策法规)

Copyright © 2006-2008 flashas.net All Rights Reserved.
网站内容咨询: admin#flashas.net (#为@) 联系QQ:40777822 浙ICP备06033001号
(本网站最佳浏览解析度为1024*768, 建议使用IE 6.0或以上版本浏览器。)