Effect 组件

Zoom

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
 layout="vertical"
 verticalAlign="middle"
 backgroundColor="white">

 <mx:Zoom id="zoom" />

 <mx:ApplicationControlBar dock="true">

 <mx:Button label="hide"
 click="panel.visible = false;"
 enabled="{panel.visible}" />

 <mx:Button label="show"
 click="panel.visible = true;"
 enabled="{!panel.visible}" />

 </mx:ApplicationControlBar>

 <mx:Panel id="panel"
 title="title"
 status="status"
 showEffect="{zoom}"
 hideEffect="{zoom}"
 width="100%"
 height="100%">

 <mx:ControlBar>

 <mx:Label text="control bar" />

 </mx:ControlBar>

 </mx:Panel>

</mx:Application>

弹性效果

<mx:Script>
 <![CDATA[

 import mx.effects.easing.Bounce;

 ]]>
</mx:Script>

<mx:Zoom id="zoom" easingFunction="Bounce.easeOut" />

Move

<?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>

弹性效果

<mx:Script>
 <![CDATA[

 import mx.effects.easing.Bounce;

 ]]>
</mx:Script>

 <mx:Move id = "ef_move" easingFunction="Bounce.easeOut" />