Form组件添加动画效果

来源：互联网发布：linux:yy 编辑：程序博客网时间：2024/04/28 07:11

下面的实例中，有一个表格（ Form ），这个 Form 有一个高级模式，当选择高级模式后会出现更多额外的文本框给用户填写。
当你点击"Toggle Form" 按钮时额外的文本框会显示或者隐藏

<?xml version="1.0" encoding="utf-8"?><mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"><mx:Script></mx:Script><mx:Move id="ef_move" easingFunction="Back.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就可以了

2010-10-29

详文参考原文：http://www.flashas.net/html/Flex/20080313/2644.html