• Flex各种效果集合(Blur,Move,Fade,Glow,Zoom,Reseze,WipeLeft等)


    以下是今天做的Flex的一些效果,其中最后四个。WipeLeft,Right,Up,Down,比较实用,做的过程中收获很大。

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

    <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
     layout="absolute" minWidth="955" minHeight="600"  click="application1_clickHandler(event)">

        <mx:Script>
            <![CDATA[
                import mx.events.EffectEvent;
                import mx.events.FlexEvent;
                
                public var fangxiang:int=0;
                protected function myBtn_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myBlur.play();
                }

                protected function button1_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myMove.play();
                }


                protected function button2_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myFadeOut);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myFadeIn);
                        myPnl.visible=true;                
                    }
                }



                protected function button3_mouseDownHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myGlowDown.play();
                }


                protected function button3_mouseUpHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myGlowUp.play();
                }


                protected function button4_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myResize1.addEventListener(EffectEvent.EFFECT_END,onend);
                    myResize1.play();
                }
                


                protected function onend(event:EffectEvent):void
                {
                    myResize2.play();
                }


                protected function button5_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myRotate.play();
                }


                protected function button6_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    myZoom.play();
                }


                protected function button7_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myWipeLeft);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myWipeRight);
                        myPnl.visible=true;                
                    }


                    this.fangxiang=1;
                    //myWipeLeft.play();
                    



                }




                protected function button8_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myWipeRight);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myWipeLeft);
                        myPnl.visible=true;                
                    }
                    this.fangxiang=2;
                }


                protected function button9_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myWipeUp);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myWipeDown);
                        myPnl.visible=true;                
                    }
                    this.fangxiang=3;
                }


                protected function button10_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myWipeDown);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myWipeUp);
                        myPnl.visible=true;                
                    }
                    this.fangxiang=4;
                }




                protected function button11_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(myPnl.visible)
                    {
                        myPnl.setStyle("hideEffect",myWipeUp);
                        myPnl.visible=false;
                    }
                    else
                    {
                        myPnl.setStyle("showEffect",myWipeDown);
                        myPnl.visible=true;                
                    }
                }



                protected function application1_clickHandler(event:MouseEvent):void
                {
                    // TODO Auto-generated method stub
                    if(event.target is Button)
                    {
                        return;
                    }
                    switch(fangxiang)
                    {
                        case 1 :
                            myPnl.setStyle("hideEffect",myWipeLeft);
                            myPnl.visible=false;

                            break;
                        case 2 :
                                myPnl.setStyle("hideEffect",myWipeRight);
                                myPnl.visible=false;

                            break;
                        case 3 :
                                myPnl.setStyle("hideEffect",myWipeUp);
                                myPnl.visible=false;
        
                            break;
                        case 4 :
                                myPnl.setStyle("hideEffect",myWipeDown);
                                myPnl.visible=false;

                            break;
                        
                    }
            

                }

            ]]>
        </mx:Script>

        
        <mx:Blur id="myBlur" target="{myPnl}" blurXFrom="20.0" blurXTo="0.0" duration="1000" >
            
        </mx:Blur>
        
        <mx:Move id="myMove" target="{myPnl}" xFrom="-250" xTo="0" duration="1000">
            
        </mx:Move>
        
        <mx:Fade id="myFadeOut" target="{myPnl}"  alphaFrom="1.0" alphaTo="0.0" duration="1000">
            
        </mx:Fade>
        <mx:Fade id="myFadeIn" target="{myPnl}"  alphaFrom="0.0" alphaTo="1.0" duration="1000">
            
        </mx:Fade>    
        
        <mx:Glow id="myGlowDown" target="{myPnl}"  alphaFrom="1.0" alphaTo="0.1" duration="500" color="#FF3b00" >
            
        </mx:Glow>
        <mx:Glow id="myGlowUp" target="{myPnl}"  alphaFrom="0.1" alphaTo="1.0" duration="1000" color="#FF3b00" >
            
        </mx:Glow>    
        
        <mx:Resize id="myResize1" target="{myPnl}" widthFrom="250" widthTo="500" duration="2000" >
            
        </mx:Resize>
        <mx:Resize id="myResize2" target="{myPnl}" widthFrom="500" widthTo="250" duration="2000" >
            
        </mx:Resize>
        
        <mx:Rotate id="myRotate" target="{myPnl}" angleFrom="0"  angleTo="180" duration="1000">
            
        </mx:Rotate>
        
        <mx:Zoom id="myZoom" target="{myPnl}" zoomWidthFrom="1"  zoomWidthTo="0.5" zoomHeightFrom="1" zoomHeightTo="0.5" duration="1000">
            
        </mx:Zoom>
        
        <mx:WipeLeft id="myWipeLeft"  duration="1000" >
            
        </mx:WipeLeft>
        
        <mx:WipeRight id="myWipeRight"  duration="1000" >
            
        </mx:WipeRight>
        
        <mx:WipeUp id="myWipeUp" duration="1000">
            
        </mx:WipeUp>
        <mx:WipeDown id="myWipeDown" duration="1000">
            
        </mx:WipeDown>
        
        <mx:Button x="31" y="46" label="Blur" id="myBtn" click="myBtn_clickHandler(event)"/>
        
        
        <mx:Panel  x="0" y="210" width="250" height="200" layout="absolute" id="myPnl" visible="false" >
            <mx:Label x="33" y="31" text="标签" width="119" height="74"/>
            <mx:Button x="182" y="0" label="关闭" click="button11_clickHandler(event)"/>
        </mx:Panel>
        <mx:Button x="99" y="46" label="Move" click="button1_clickHandler(event)"/>
        <mx:Button x="176" y="46" label="Fade" click="button2_clickHandler(event)"/>
        <mx:Button x="247" y="46" label="Glow" mouseDown="button3_mouseDownHandler(event)" mouseUp="button3_mouseUpHandler(event)"/>
        <mx:Button x="322" y="46" label="Resize" click="button4_clickHandler(event)"/>
        <mx:Button x="404" y="46" label="Rotate" click="button5_clickHandler(event)"/>
        <mx:Button x="494" y="46" label="Zoom" click="button6_clickHandler(event)"/>
        <mx:Button x="32" y="116" label="WipeLeft" click="button7_clickHandler(event)"/>
        <mx:Button x="127" y="116" label="WipeRight" click="button8_clickHandler(event)"/>
        <mx:Button x="232" y="116" label="WipeUp" click="button9_clickHandler(event)"/>
        <mx:Button x="322" y="116" label="WipeDown" click="button10_clickHandler(event)"/>
        <mx:Panel x="463" y="330" width="250" height="200" layout="absolute">
        </mx:Panel>
        
        
        
    </mx:Application>

  • 相关阅读:
    在React中使用Redux数据流
    开发中经常遇到的一些css样式问题
    记录一下CSS outline-width 属性
    使用git stash命令保存和恢复进度
    一分钟搭建好webpack通用坏境
    二维码生成(QRCode.js)
    IE6浏览器有哪些常见的bug,缺陷或者与标准不一致的地方,如何解决
    如何进行网站性能优化
    JavaScript深拷贝与浅拷贝的理解
    新问题: 两个样式对同一个元素操作,为什么最新的样式没有起作用?(已解决)
  • 原文地址:https://www.cnblogs.com/nianshi/p/1746544.html
Copyright © 2020-2023  润新知