Flex4 - Animate和AnimateFilter在播放滤镜效果动画上的区别
Animate和AnimateFilter都可以处理滤镜filter效果,它们的区别如下:
AnimateFilter:效果是临时的,当其播放时会把滤镜赋予目标组件,播放完毕后就自动移除该滤镜
Animate:是AnimateFilter的基类,其播放时是直接改变filter的值,如果有组件使用该filter滤镜,即使播放完毕后仍保留该滤镜及状态。
举个例子:
左边使用AnimateFilter,鼠标移上去有发光效果。但播放完毕后,发光效果消失。
右边使用Animate,即使播放完毕,发光效果仍在。
代码如下:
AnimateFilter:效果是临时的,当其播放时会把滤镜赋予目标组件,播放完毕后就自动移除该滤镜
Animate:是AnimateFilter的基类,其播放时是直接改变filter的值,如果有组件使用该filter滤镜,即使播放完毕后仍保留该滤镜及状态。
举个例子:
左边使用AnimateFilter,鼠标移上去有发光效果。但播放完毕后,发光效果消失。
右边使用Animate,即使播放完毕,发光效果仍在。
<?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx" minWidth="955" minHeight="600"> <fx:Declarations> <s:GlowFilter id="glow1" color="#31C8F3"/> <s:AnimateFilter id="glowAnimation1" target="{ball}" bitmapFilter="{glow1}"> <s:motionPaths> <s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="30"/> <s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="30"/> <s:SimpleMotionPath property="alpha" valueFrom="0" valueTo="1"/> </s:motionPaths> </s:AnimateFilter> <s:GlowFilter id="glow2" color="#31C8F3" alpha="0"/> <s:Animate id="glowAnimation2" target="{glow2}"> <s:motionPaths> <s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="30"/> <s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="30"/> <s:SimpleMotionPath property="alpha" valueFrom="0" valueTo="1"/> </s:motionPaths> </s:Animate> </fx:Declarations> <s:HGroup paddingLeft="15" paddingTop="15" gap="15"> <s:Image id="ball" source="@Embed(source='start_menu_btn.png')" buttonMode="true" rollOver="{glowAnimation1.play()}" rollOut="{glowAnimation1.play(null,true)}"/> <s:Image source="@Embed(source='start_menu_btn.png')" buttonMode="true" rollOver="{glowAnimation2.play()}" rollOut="{glowAnimation2.play(null,true)}" filters="{[glow2]}"/> </s:HGroup> </s:Application>