Flex Fade淡入淡出效果演示

Flex Fade淡入淡出效果演示

admin |  Flex | 2010-11-8 13:40 | 3755 点击 |  0 评论

Fade淡入淡出效果可设置组件的 alpha 属性的动画效果（从透明到不透明或从不透明到透明），要对文本使用淡入淡出效果，必须使用嵌入字体，而不是设备字体。演示：

源码如下：

  
  
<?xml version="1.0"?> 
<!-- Simple example to demonstrate the Fade effect. --> 
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" height="360" 
     width="436"> 
    <mx:Fade id="fadeOut" duration="1000" alphaFrom="1.0" alphaTo="0.0"/> 
    <mx:Fade id="fadeIn" duration="1000" alphaFrom="0.0" alphaTo="1.0"/> 
 
    <mx:Panel title="Fade Effect Example" width="356" height="310"  
         horizontalAlign="center" layout="absolute"> 
        <mx:Text width="100%" color="blue" fontSize="12" 
            text="使用Fade效果淡入淡出图片"/> 
     
        <mx:Image source="@Embed(source='meinv.jpg')" id="img"  
            visible="true" 
            hideEffect="{fadeOut}" showEffect="{fadeIn}" x="28" y="26"/> 
 
        <mx:Button x="88" y="234" label="显示" fontSize="12"  
            click="img.visible=true"/> 
        <mx:Button x="196" y="234" label="隐藏" fontSize="12"  
            click="img.visible=false"/> 
    </mx:Panel> 
</mx:Application> 

简要说明：alphaFrom指定初始透明度alphaTo表示最终透明度，取值范围都是0.0~1.0，0.0 表示透明，1.0 表示完全不透明。showEffect事件和hideEffect事件分别指显示时的效果事件和隐藏时的效果事件，duration属性表示效果的时间间隔