Flex学习笔记_06 使用行为对象和动画效果_模糊

6.3.1 模糊效果和发光效果的运用实例
Blur 模糊效果和 Glow 发光效果都运用了Flash Player 内置的filter滤镜功能，继承于 TweenEffect 对象。TweenEffect 对象是所有形变效果的父类，它的子类占据了动画效果的绝大部分。

Blur 模糊效果

Xml代码

<? xml version = "1.0" encoding = "utf-8" ?>
< mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" creationComplete = "initUI()" >
< mx:Style source = "style.css" />
< mx:Script >
<![CDATA[
private var handlerEnd:Boolean = true;
private var isReverse:Boolean = false;
//初始化函数
private function initUI():void{
//指定目标对象，[]是数组定义符号
//[myPane]表示一个只含有一个元素的数组
Effect_Blur.targets = [myPanel];
//var arr:Array = new Array();
//arr.push(myPanel);
}
//开始播放动画效果
internal function startBlur():void{
handlerEnd = true;
Effect_Blur.play();
}
//执行动画播放结束后的动作
internal function endBlur():void{
if(handlerEnd){
//反向变化
isReverse = !isReverse;
Effect_Blur.play(null,isReverse);
}
}
//停止按钮的动作
internal function stopBlur():void{
handlerEnd = false;
Effect_Blur.end();
pauseBtn.label = "暂停";
//清空滤镜，消除模糊效果，将myPanel还原到原始状态
myPanel.filters = [];
}
//暂停按钮的动作
internal function pauseHandler():void{
if(!Effect_Blur.isPlaying){
return;
}
if(pauseBtn.label == "暂停"){
pauseBtn.label = "继续";
Effect_Blur.pause();
}else{
pauseBtn.label = "暂停";
Effect_Blur.resume();
}
}
]]>
</ mx:Script >
< mx:Blur id = "Effect_Blur" effectEnd = "endBlur()"
blurXFrom = "0" blurXTo = "30" blurYFrom = "0" blurYTo = "30" duration = "1500" />
< mx:Panel id = "myPanel" styleName = "imgPanel" x = "30" y = "42" width = "232" height = "215" layout = "absolute" title = "图片面板" >
< mx:Image x = "0" y = "10" source = "tree.jpg" />
< mx:Label x = "0" y = "109" text = "walking tree" />
</ mx:Panel >
< mx:Button click = "startBlur()" x = "30" y = "275" label = "开始" width = "50" />
< mx:Button click = "stopBlur()" x = "124" y = "275" label = "停止" width = "48" />
< mx:Button click = "pauseHandler()" x = "214" y = "275" label = "暂停" width = "48" id = "pauseBtn" />
</ mx:Application >

        <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">

    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            private var handlerEnd:Boolean = true;
            private var isReverse:Boolean = false;
            //初始化函数
            private function initUI():void{
                //指定目标对象，[]是数组定义符号
                //[myPane]表示一个只含有一个元素的数组
                Effect_Blur.targets = [myPanel];               
                //var arr:Array = new Array();
                //arr.push(myPanel);
            }
            //开始播放动画效果
            internal function startBlur():void{
                handlerEnd = true;               
                Effect_Blur.play();
            }
            //执行动画播放结束后的动作
            internal function endBlur():void{
                if(handlerEnd){
                    //反向变化
                    isReverse = !isReverse;
                    Effect_Blur.play(null,isReverse);                   
                }
            }
            //停止按钮的动作
            internal function stopBlur():void{
                handlerEnd = false;
                Effect_Blur.end();
                pauseBtn.label = "暂停";
                //清空滤镜，消除模糊效果，将myPanel还原到原始状态
                myPanel.filters = [];
            }
            //暂停按钮的动作
            internal function pauseHandler():void{
                if(!Effect_Blur.isPlaying){
                    return;
                }
                if(pauseBtn.label == "暂停"){
                    pauseBtn.label = "继续";
                    Effect_Blur.pause();
                }else{
                    pauseBtn.label = "暂停";
                    Effect_Blur.resume();
                }
            }
        ]]>
    </mx:Script>
    <mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>
    <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="图片面板">
        <mx:Image x="0" y="10" source="tree.jpg"/>
        <mx:Label x="0" y="109" text="walking tree"/>
    </mx:Panel>
    <mx:Button click="startBlur()" x="30" y="275" label="开始" width="50"/>
   
    <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>
    <mx:Button click="pauseHandler()" x="214" y="275" label="暂停" width="48" id="pauseBtn"/>
   
</mx:Application>

动画效果的target 属性，用来指定作用对象，而targets 属性可以将动画效果一次运用在多个对象上。targets 是一个Array 数组。

Blur 对象的这些属性：blurXFrom、blurXTo、blurYFrom、blurYTo 定义了始末位置的模糊距离。

Effect 对象的play 方法中，第一个参数表示目标对象，如果之前已经指定，可以直接用null代替。第二个参数isReverse 表示播放方向，true：逆向播放，falsh：正向播放。

filters属性代表目标对象当前使用的滤镜集合。它是所有可视化对象的公有属性，以数组的形式存储了自身所有的滤镜数据。如果使用[]给他赋值，代表清除了目标所有滤镜效果的作用。

Glow 发光效果

Xml代码

<? xml version = "1.0" encoding = "utf-8" ?>
< mx:Application xmlns:mx = "http://www.adobe.com/2006/mxml" layout = "absolute" creationComplete = "initUI()" >
< mx:Style source = "style.css" />
< mx:Script >
<![CDATA[
private var handlerEnd:Boolean = true;
private var isReverse:Boolean = false;
private function initUI():void{
Effect_Blur.target = myPanel;
Effect_Glow.target = myPanel;
}
//开始播放动画效果
internal function startBlur():void{
//在播放函数中指定目标对象，[]是数组定义符号，[myPane]
//var arr:Array = new Array();
//arr.push(myPanel);
handlerEnd = true;
Effect_Blur.play();
Effect_Glow.play();
}
//执行动画播放结束后的动作
internal function endBlur():void{
if(handlerEnd){
//反向播放
isReverse = !isReverse;
Effect_Blur.play(null,isReverse);
}
}
internal function stopBlur():void{
handlerEnd = false;
Effect_Blur.end();
var tmpArr:Array = myPanel.filters;
//遍历数组
for (var i:uint = 0; i < tmpArr.length; i++) {
//is 是类型判断符号，指明对象是否是指定对象的实例或指定对象子类的实例
if (tmpArr[i] is BlurFilter) {
//如果是，从数组中删除。
//splice（i,1)，删除从i位置开始的一个元素
tmpArr.splice(i,1);
i = i-1;
}
}
//将新的数据赋予对象，新的滤镜生效
//myPanel.filters = tmpArr;
myPanel.filters = []
}
]]>
</ mx:Script >
< mx:Blur id = "Effect_Blur" effectEnd = "endBlur()"
blurXFrom = "0" blurXTo = "30" blurYFrom = "0" blurYTo = "30" duration = "1500" />
< mx:Glow id = "Effect_Glow" alphaFrom = "1.0" alphaTo = "0.3"
blurXFrom = "0.0" blurXTo = "30.0"
blurYFrom = "0.0" blurYTo = "30.0" color = "0x6633ff" />
< mx:Panel id = "myPanel" styleName = "imgPanel" x = "30" y = "42" width = "232" height = "215" layout = "absolute" title = "图片面板" >
< mx:Image x = "0" y = "10" source = "tree.jpg" />
< mx:Label x = "0" y = "109" text = "walking tree" />
</ mx:Panel >
< mx:Button click = "startBlur()" x = "30" y = "275" label = "开始" width = "50" />
< mx:Button click = "stopBlur()" x = "124" y = "275" label = "停止" width = "48" />
</ mx:Application >

      <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="initUI()">
    <mx:Style source="style.css" />
   
    <mx:Script>
        <![CDATA[
            private var handlerEnd:Boolean = true;
            private var isReverse:Boolean = false;
           
            private function initUI():void{
                Effect_Blur.target = myPanel;
                Effect_Glow.target = myPanel;
            }
            //开始播放动画效果
            internal function startBlur():void{
                //在播放函数中指定目标对象，[]是数组定义符号，[myPane]
                //var arr:Array = new Array();
                //arr.push(myPanel);
                handlerEnd = true;               
                Effect_Blur.play();
                Effect_Glow.play();
            }
            //执行动画播放结束后的动作
            internal function endBlur():void{
                if(handlerEnd){
                    //反向播放
                    isReverse = !isReverse;
                    Effect_Blur.play(null,isReverse);                   
                }
            }
            internal function stopBlur():void{
                handlerEnd = false;
                Effect_Blur.end();
               
                var tmpArr:Array = myPanel.filters;
                //遍历数组
                for (var i:uint = 0; i < tmpArr.length; i++) {
                    //is 是类型判断符号，指明对象是否是指定对象的实例或指定对象子类的实例
                    if (tmpArr[i] is BlurFilter) {
                        //如果是，从数组中删除。
                        //splice（i,1)，删除从i位置开始的一个元素
                        tmpArr.splice(i,1);
                        i = i-1;
                    }
                }
                //将新的数据赋予对象，新的滤镜生效
                //myPanel.filters = tmpArr;
                myPanel.filters = []
            }
        ]]>
    </mx:Script>
   
    <mx:Blur id="Effect_Blur" effectEnd="endBlur()"
        blurXFrom="0" blurXTo="30" blurYFrom="0" blurYTo="30" duration="1500"/>
    <mx:Glow id="Effect_Glow" alphaFrom="1.0" alphaTo="0.3"
        blurXFrom="0.0" blurXTo="30.0"
        blurYFrom="0.0" blurYTo="30.0" color="0x6633ff" />
   
    <mx:Panel id="myPanel" styleName="imgPanel" x="30" y="42" width="232" height="215" layout="absolute" title="图片面板">
        <mx:Image x="0" y="10" source="tree.jpg"/>
        <mx:Label x="0" y="109" text="walking tree"/>
    </mx:Panel>
    <mx:Button click="startBlur()" x="30" y="275" label="开始" width="50"/>
   
    <mx:Button click="stopBlur()" x="124" y="275" label="停止" width="48"/>
   
</mx:Application>

Glow 对象的参数比较多，主要是设置光颜色color、透明度alphaFrom alphaTo、水平和垂直的发光距离blurXFrom、blurXTo、blurYFrom、blurYTo。

Flex学习笔记_06 使用行为对象和动画效果_模糊、发光效果

更多文章、技术交流、商务合作、联系博主

微信扫码或搜索：z360901061

微信扫一扫加我为好友

QQ号联系： 360901061

您的支持是博主写作最大的动力，如果您喜欢我的文章，感觉我的文章对您有帮助，请用微信扫描下面二维码支持博主2元、5元、10元、20元等您想捐的金额吧，狠狠点击下面给点支持吧，站长非常感激您！手机微信长按不能支付解决办法：请将微信支付二维码保存到相册，切换到微信，然后点击微信右上角扫一扫功能，选择支付二维码完成支付。

【本文对您有帮助就好】元

2元

5元

10元

20元

自定义