核心提示: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> <!-- 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" /> |
Flex 中在表单(Form组件)上填加动画效果(Effect)
最新推荐文章于 2024-03-08 10:43:55 发布