积少成多Flash(11) - Flex 3.0 动画效果(effect)

[源码下载]

积少成多Flash(11) - Flex 3.0 动画效果(effect)

作者： webabcd


介绍
演示 Flex 3.0 中的各种动画效果(effect)的应用 

• Zoom - 放大/缩小
• Wipe - 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示
• Rotate - 旋转
• Resize - 调整控件大小
• Fade - 淡入/淡出
• Move - 改变控件位置
• Iris - 显示/消失（放射性渐变）
• Blur - 模糊
• Dissolve - 对控件做alpha修改
• Glow - 对控件做周边发光
• SoundEffect - 播放一段音频
• Parallel - 对各种 effect 做并行展示
• Sequence - 对各种 effect 做串行展示
• TweenEffect - 此类是大部分 effect 的基类

在线DEMO
http://www.cnblogs.com/webabcd/archive/2009/11/09/1598980.html


1、Zoom.mxml

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

<!--
    演示 放大/缩小 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Zoom (放大/缩小)" >

     < mx:Script >
         <![CDATA[
            
            private function doZoom(e:MouseEvent):void
            {
                if (zoom.isPlaying)
                {
                    zoom.reverse();
                }
                else
                {
                    zoom.play([e.target], e.type == MouseEvent.ROLL_OUT ? true : false);
                }
            }        
            
         ]]>
     </ mx:Script >
        
     < mx:Zoom  id ="zoom"  originX ="24"  originY ="24"  
        zoomWidthFrom ="1"  zoomWidthTo ="2"  zoomHeightFrom ="1"  zoomHeightTo ="2"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"  
        scaleX ="1"  scaleY ="1"  
        rollOver ="doZoom(event)"  rollOut ="doZoom(event)"
      />
    
</ mx:Panel >

2、Wipe.mxml

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

<!--
    演示 从上/下/左/右 4 个方向 线性渐变地 对控件做 删除/显示 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - WipeUp, WipeDown, WipeLeft, WipeRight (擦除)" >
    
     < mx:Script >
         <![CDATA[
            
            private function effectEndHandler():void
            {
                mx.controls.Alert.show("WipeLeft 效果结束");
            }        
            
         ]]>
     </ mx:Script >
    
     < mx:WipeLeft  id ="wipeLeft"  duration ="1000"  effectEnd ="effectEndHandler()"   />
     < mx:WipeUp  id ="wipeUp"  duration ="1000"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"   
        visible ="{chk.selected}"  hideEffect ="{wipeLeft}"  showEffect ="{wipeUp}"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:CheckBox  id ="chk"  label ="显示"  selected ="true"  
             textRollOverColor ="blue"
             textSelectedColor ="red"
          />
      </ mx:ControlBar >
     
</ mx:Panel >

3、Rotate.mxml

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

<!--
    演示 旋转 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Rotate (旋转)" >
    
     < mx:Script >
         <![CDATA[
        
            [Bindable]
            private var angle:int = 0;
            
            private function rotateImage():void
            {
                rotate.end();
                angle +=45;
                rotate.play();
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Rotate  id ="rotate"  angleFrom ="{angle-45}"  angleTo ="{angle}"  target ="{image}"  duration ="100"   />
    
     < mx:Image  id ="image"  source ="@Embed('images/logo.png')"  
        x ="24"  y ="24"  width ="48"  height ="48"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:Button  label ="旋转 45 度"  click ="rotateImage();"   />
      </ mx:ControlBar >
     
</ mx:Panel >

4、Resize.mxml

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

<!--
    演示 调整控件大小 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Resize (重设大小)" >
    
     < mx:Script >
         <![CDATA[
            
            private function smoothImage(e:Event):void
            {
                var bmp:Bitmap = e.target.content as Bitmap;
                bmp.smoothing = true;
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Resize  id ="resizeUp"  target ="{image}"  widthTo ="180"  heightTo ="180"   />
     < mx:Resize  id ="resizeDown"  target ="{image}"  widthTo ="48"  heightTo ="48"   />
    
     < mx:Image  id ="image"  source ="@Embed('images/logo.png')"  
        x ="24"  y ="24"  width ="48"  height ="48"
        creationComplete ="smoothImage(event)"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:Button  label ="放大"  click ="resizeUp.end(); resizeUp.play();"   />
          < mx:Button  label ="缩小"  click ="resizeDown.end(); resizeDown.play();"   />
      </ mx:ControlBar >
          
</ mx:Panel >

5、Fade.mxml

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

<!--
    演示 淡入/淡出 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Fade (淡入/淡出)" >
    
     < mx:Fade  id ="fadeOut"  duration ="1000"  alphaFrom ="1"  alphaTo ="0"   />
     < mx:Fade  id ="fadeIn"  duration ="1000"  alphaFrom ="0"  alphaTo ="1"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"   
        visible ="{chk.selected}"  hideEffect ="{fadeOut}"  showEffect ="{fadeIn}"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:CheckBox  id ="chk"  label ="显示"  selected ="true"  
             textRollOverColor ="blue"
             textSelectedColor ="red"
          />
      </ mx:ControlBar >
     
</ mx:Panel >

6、Move.mxml

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

<!--
    演示 改变控件位置 的动画效果（移动控件）
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Move (移动)" >
    
     < mx:Script >
         <![CDATA[
            
            private function moveImage(e:MouseEvent):void
            {
                var position:Point = new Point(stage.mouseX, stage.mouseY);
                var localPosition:Point = canvas.globalToLocal(position);
            
                effectMove.end();    
                effectMove.xTo = localPosition.x - (image.width / 2)
                effectMove.yTo = localPosition.y - (image.height / 2)
                effectMove.play();
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Move  id ="effectMove"  target ="{image}"   />
    
     < mx:Canvas  id ="canvas"  width ="100%"  height ="100%"  mouseDown ="moveImage(event)" >
    
         < mx:Image  id ="image"  source ="@Embed('images/logo.png')"
            x ="24"  y ="24"  width ="48"  height ="48"  
          />
         
     </ mx:Canvas >
     
</ mx:Panel >

7、Iris.mxml

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

<!--
    演示 显示/消失（放射性渐变） 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Iris (遮罩 - 用于消失/显示对象)" >
    
     < mx:Iris  id ="irisOut"  duration ="1000"  showTarget ="true"   />
     < mx:Iris  id ="irisIn"  duration ="1000"  showTarget ="false"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"   
        visible ="{chk.selected}"  hideEffect ="{irisOut}"  showEffect ="{irisIn}"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:CheckBox  id ="chk"  label ="显示"  selected ="true"  
             textRollOverColor ="blue"
             textSelectedColor ="red"
          />
      </ mx:ControlBar >
     
</ mx:Panel >

8、Blur.mxml

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

<!--
    演示 模糊 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Blur (模糊)" >
    
     < mx:Blur  id ="blurImage"  duration ="1000"
        blurXFrom ="0"  blurXTo ="10"  blurYFrom ="0"  blurYTo ="10"
     />
     < mx:Blur  id ="unblurImage"  duration ="1000"
        blurXFrom ="10"  blurXTo ="0"  blurYFrom ="10"  blurYTo ="0"
     />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"
        rollOverEffect ="{blurImage}"  rollOutEffect ="{unblurImage}"
      />

</ mx:Panel >

9、Dissolve.mxml

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

<!--
    演示 对控件做alpha修改 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Dissolve (溶解, 变换 alpha 的效果)" >
    
     < mx:Dissolve  id ="dissolveOut"  duration ="1000"  alphaFrom ="1"  alphaTo ="0"   />
     < mx:Dissolve  id ="dissolveIn"  duration ="1000"  alphaFrom ="0"  alphaTo ="1"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"   
        visible ="{chk.selected}"  hideEffect ="{dissolveOut}"  showEffect ="{dissolveIn}"
      />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:CheckBox  id ="chk"  label ="显示"  selected ="true"  
             textRollOverColor ="blue"
             textSelectedColor ="red"
          />
      </ mx:ControlBar >
     
</ mx:Panel >

10、Glow.mxml

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

<!--
    演示 对控件做周边发光 的动画效果
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Glow (发光)" >
    
     < mx:Glow  id ="glowImage"  duration ="1000"
        alphaFrom ="1"  alphaTo ="0.3"
        blurXFrom ="0"  blurXTo ="50"  blurYFrom ="0"  blurYTo ="50"
        color ="0x22aa55"
     />
     < mx:Glow  id ="unglowImage"  duration ="1000"
        alphaFrom ="0.3"  alphaTo ="1"
        blurXFrom ="50"  blurXTo ="0"  blurYFrom ="50"  blurYTo ="0"
        color ="0x3388dd"
     />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"
        rollOverEffect ="{glowImage}"  rollOutEffect ="{unglowImage}"
      />
     
</ mx:Panel >

11、SoundEffect.mxml

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

<!--
    播放一段音频
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - SoundEffect (音效)" >
    
     < mx:SoundEffect  id ="soundEffect"  source ="@Embed('assets/bomb.mp3')"   />
    
     < mx:Image  source ="@Embed('images/logo.png')"
        x ="24"  y ="24"  width ="48"  height ="48"   
          mouseDownEffect ="{soundEffect}"
      />
    
</ mx:Panel >

12、Parallel.mxml

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

<!--
    对各种 effect 做并行展示
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="Effect - Parallel (效果并行), AddItemAction, RemoveItemAction" >
    
     < mx:Script >
         <![CDATA[
        
            import mx.collections.ArrayCollection;
            
            [Bindable]
            private var dp:ArrayCollection = new ArrayCollection(["webabcd", "webabcd", "webabcd"])
            
            private function addItem():void
            {
                dp.addItemAt("webabcd", dp.length);
            }
            
            private function removeItem():void
            {
                dp.removeItemAt(dp.length - 1);
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Parallel  id ="parallel" >
         < mx:AddItemAction  filter ="addItem"  startDelay ="500"   />
         < mx:RemoveItemAction  filter ="removeItem"  startDelay ="500"   />
         < mx:Blur  startDelay ="500"  duration ="1000"  blurXFrom ="0"  blurXTo ="10"  blurYFrom ="0"  blurYTo ="10"  filter ="addItem"   />
     </ mx:Parallel >
    
     < mx:Label  text ="顺便说明 AddItemAction, RemoveItemAction"   x ="10"  y ="10" />
    
     < mx:List  id ="list"  dataProvider ="{dp}"  fontSize ="16"   y ="36"  x ="10"  height ="178"  width ="360"
        itemsChangeEffect ="{parallel}" />
     
      < mx:ControlBar  horizontalAlign ="center" >
          < mx:Button  label ="增加一项"  click ="addItem();"   />
          < mx:Button  label ="删除一项"  click ="removeItem();"   />
      </ mx:ControlBar >
     
</ mx:Panel >

13、Sequence.mxml

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

<!--
    对各种 effect 做串行展示
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="vertical"  horizontalAlign ="center"  width ="400"  height ="300"
    title ="Effect - Sequence (效果串行), AnimateProperty, Pause" >
    
     < mx:Label  text ="顺便说明 AnimateProperty, Pause" />
    
     < mx:Sequence  id ="sequence" >
          < mx:AnimateProperty  property ="scaleX"  fromValue ="1"  toValue ="3"  duration ="300"   />
          < mx:Pause  duration ="2000" />
         < mx:AnimateProperty  property ="scaleX"  fromValue ="3"  toValue ="1"  duration ="1000"   />   
     </ mx:Sequence >
    
     < mx:Image  source ="@Embed('images/logo.png')"
        width ="48"  height ="48"
        scaleX ="1"  scaleY ="1"
        mouseDownEffect ="{sequence}"
      />
     
</ mx:Panel >

14、TweenEffect.mxml

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

<!--
    演示 TweenEffect （此类是大部分 effect 的基类） 
-->

< mx:Panel  xmlns:mx ="http://www.adobe.com/2006/mxml"  layout ="absolute"  width ="400"  height ="300"
    title ="TweenEffect 的介绍（它是部分 effect 的基类）" >
    
     < mx:Script >
         <![CDATA[
        
            import mx.events.TweenEvent;
            
            private function tweenStartHandler(e:TweenEvent):void
            {
                txtMsg.text += "补间效果开始/r";
            }
            
            private function tweenEndHandler(e:TweenEvent):void
            {
                txtMsg.text += "补间效果结束/r";
                lblUpdate.text = "宽度: " + image.width;
            }
            
            private function tweenUpdateHandler(e:TweenEvent):void
            {
                lblUpdate.text = "宽度: " + image.width;
            }
            
         ]]>
     </ mx:Script >
    
     < mx:Resize  id ="resizeUp"  target ="{image}"  widthTo ="180"  heightTo ="180"  duration ="5000"
        tweenStart ="tweenStartHandler(event)"
        tweenEnd ="tweenEndHandler(event)"
        tweenUpdate ="tweenUpdateHandler(event)"
     />
     < mx:Resize  id ="resizeDown"  target ="{image}"  widthTo ="48"  heightTo ="48"   />
    
     < mx:Image  id ="image"  source ="@Embed('images/logo.png')"  
        x ="24"  y ="24"  width ="48"  height ="48"
      />
     < mx:Text  x ="264"  y ="36"  width ="106"  height ="178"  id ="txtMsg" />
     < mx:Label  x ="264"  y ="10"  id ="lblUpdate" />
     
     < mx:ControlBar  horizontalAlign ="center" >
         < mx:Button  label ="放大"  click ="resizeUp.end(); resizeUp.play();"   />
         < mx:Button  label ="缩小"  click ="resizeDown.end(); resizeDown.play();"   />
     </ mx:ControlBar >

</ mx:Panel >

OK
[源码下载]