在Flex 4中使用AnimateFilter为组件添加发光效果

AnimateFilter(滤镜动画)顾名思义,就是通过动态改变滤镜的属性而形成的动画效果,这样的滤镜包括 DropShadowFilter、GlowFilter、BlurFilter和ShaderFilter。在Flex中我们可以很方便为组件添加滤镜,因此也就可以很方便为组件添加滤镜动画。

在本实例中,当鼠标移动到按钮上时,在按钮周围会产生一个很酷的发光效果。鼠标移出按钮时发光效果消失。

首先我们新建一个GradientGlowFilter(渐变发光滤镜)和一个圆形按钮。渐变发光滤镜效果是静态的,我们可以将其实例添加到到按钮的filters属性中测试。不过要实现动画发光效果,得借助AnimateFilter对象。

滤镜动画中,最关键是设定目标动画对象和滤镜,此处分别为按钮btn和渐变发光滤镜glow。AnimateFilter类继承Animate类,因此还得设定motionPath属性,此处指定为一个SimpleMotionPath对象,并为其定义滤镜的目标属性为strengthvalueFrom属性值为0valueFrom属性值为5。也就是说,我们只是改变了滤镜的发光强度。最后,我们通过鼠标事件来控制滤镜动画的播放。

点击此处查看该实例最终效果,点击此处下载该实例的源码。

发表评论