Flex中如何利用setStyle()函数实现图片showEffect和hideEffect效果的例子

By Minidxer | April 22, 2009

接下来的例子演示了Flex中如何利用setStyle()函数，实现showEffect和hideEffect效果。

让我们先来看一下Demo（可以右键View Source或点击这里察看源代码）：


下面是完整代码(或点击这里察看)：

Download: main.mxml
  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>
代码：Peter deHaan 翻译/整理/编译：中文Flex例子

Topics: Image | No Comments » | 3,007 views Tags: , , , ,

你可能还对下列文章感兴趣:

Leave a Comment

Name(*):

E-Mail(*) :

Website :

Comments :

Search Posts

Categories

Archives

Blogroll