当前位置: > > > Flex4 - Animate和AnimateFilter在播放滤镜效果动画上的区别

Flex4 - Animate和AnimateFilter在播放滤镜效果动画上的区别

Animate和AnimateFilter都可以处理滤镜filter效果,它们的区别如下:
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>
评论0