Flex中如何利用setStyle()函数，实现showEffect和hideEffect效果

 

1. <?xml version="1.0" encoding="utf-8"?>
2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
3.         layout="vertical"
4.         verticalAlign="middle"
5.         backgroundColor="white"
6.         creationComplete="init();">
7.  
8.     <mx:Script>
9.         <![CDATA[
10.             import mx.effects.easing.*;
11.  
12.             private function init():void {
13.                 img.setStyle("showEffect", rotate);
14.                 img.setStyle("hideEffect", fade);
15.             }
16.         ]]>
17.     </mx:Script>
18.  
19.     <mx:Fade id="fade" />
20.     <mx:Rotate id="rotate"
21.             angleFrom="-180"
22.             angleTo="0"
23.             easingFunction="Elastic.easeInOut"
24.             duration="2000" />
25.  
26.     <mx:ApplicationControlBar dock="true">
27.         <mx:Form styleName="plain">
28.             <mx:FormItem label="visible:">
29.                 <mx:ToggleButtonBar id="toggleButtonBar"
30.                         itemClick="img.visible = event.item.data;">
31.                     <mx:dataProvider>
32.                         <mx:Array>
33.                             <mx:Object label="Show" data="true" />
34.                             <mx:Object label="Hide" data="false" />
35.                         </mx:Array>
36.                     </mx:dataProvider>
37.                 </mx:ToggleButtonBar>
38.             </mx:FormItem>
39.         </mx:Form>
40.     </mx:ApplicationControlBar>
41.  
42.     <mx:Image id="img"
43.             source="@Embed('assets/flashplayer_icon.jpg')"
44.             width="100"
45.             height="100" />
46.  
47. </mx:Application>