滤镜列表:http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/effects/package-detail.html
常用的效果滤镜有7个：
GlowFilter（单色发光滤镜）
BlurFilter（模糊滤镜）
DropShadowFilter（阴影滤镜）
BevelFilter（斜角滤镜）
GradientGlowFilter（彩色发光滤镜）
GradientBevelFilter（彩色斜角滤镜）
ColorMatrixFilter（色彩响应矩阵滤镜）
动画滤镜定义与调用:
<fx:Declarations>
<s:BlurFilter blurX="30" blurY="30" quality="100" />
<!-- 先定义滤镜 -->
<s:AnimateFilter id="myFilter" target="{控件}"
duration="500" bitmapFilter="{new BlurFilter()}">
<!-- 将定义的滤镜赋给 bitmapFilter -->
<s:SimpleMotionPath property="blurX" valueFrom="30" valueTo="0"/>
<s:SimpleMotionPath property="blurY" valueFrom="30" valueTo="0"/>
<s:SimpleMotionPath property="quality" valueFrom="0" valueTo="100"/>
</s:AnimateFilter>
</fx:Declarations>
<s:Button x="57" y="261" label="按钮" click="myFilter.play();" id="控件"/>
AnimateFilter 效果可将 mx.filters.IBitmapFilter 实例应用至目标，并使您能够设置各个值之间的滤镜的属性的动画。与对目标的属性进行动画设置的效果不同，AnimateFilter 效果是对应用于目标的滤镜的属性进行动画设置。
能用于此效果的滤镜在 spark.filters 中定义。包。公用滤镜包括 DropShadowFilter、GlowFilter、BlurFilter 和 ShaderFilter。
要定义要设置动画的滤镜的属性，可将 SimpleMotionPath 对象的 Array 传递至 AnimateFilter 效果的 motionPath 属性。每个 SimpleMotionPath 对象都定义滤镜的一个属性、该属性的起始值和该属性的结束值。
其他滤镜直接定义调用.如Fade透明滤镜:
<s:Fade alphaFrom="0.0" alphaTo="1.0" id="fade" target="{控件}" duration="500" />
<s:Button x="57" y="261" label="按钮" click="fade.play()" id="控件"/>
多重效果叠加:
protected function clickHandler(event:MouseEvent,title:TitleWindow):void
{
PopUpManager.addPopUp(title,this,false);
var an:Animate=new Animate(title);
an.duration=200;
var mo:SimpleMotionPath=new SimpleMotionPath("height",(event.currentTarget as IVisualElement).height,674);
var mo1:SimpleMotionPath=new SimpleMotionPath("width",(event.currentTarget as IVisualElement).width,674);
var mo2:SimpleMotionPath=new SimpleMotionPath("alpha",0,1);
var v:Vector.<MotionPath>=new Vector.<MotionPath>();
v[0]=mo;
v[1]=mo1;
v[2]=mo2;
an.motionPaths=v;
an.play();
}
状态过渡效果:
<s:transitions>
<s:Transition>
<s:Fade alphaFrom="0.0" alphaTo="0.8" duration="2000" target="{绑定控件}" />
<!-- 透明度渐变效果 -->
</s:Transition>
</s:transitions>
缓动类:
Bounce 类实现缓动功能，该功能模拟目标对象上的重力牵引和回弹目标对象
Elastic Elastic 类实现缓动功能，此时目标对象移动是由一个指数衰减正弦波定义的。
Power Power 类通过使用多项式表达式定义缓动功能。
<?xml version="1.0"?>
<!-- Simple example to demonstrate the s:Linear class. -->
<s:Application
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:mx="library://ns.adobe.com/flex/mx"
xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script>
<!--[CDATA[
protected function panel1_clickHandler(event:MouseEvent):void
{
move1.play();
}
protected function panel2_clickHandler(event:MouseEvent):void
{
move2.play();
}
]]-->
</fx:Script>
<fx:Declarations>
<s:Bounce id="boun" />
<s:Move xBy="100" easer="{boun}" id="move1" target="{panel1}" />
<s:Power exponent="4" id="power" />
<s:Move xBy="200" easer="{power}" id="move2" target="{panel2}" />
</fx:Declarations>
<s:Panel id="panel1" x="29" y="33" width="194" height="123" click="panel1_clickHandler(event)">
</s:Panel>
<s:Panel id="panel2" x="29" y="208" width="194" height="123" click="panel2_clickHandler(event)">
</s:Panel>
</s:Application>
静态滤镜效果:
flex sdk 4.0 静态滤镜效果包含在spark.filters 包中.
具体滤镜列表: http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/filters/package-detail.html
<!-- 按钮的斜角效果,类似浮雕的效果 -->
<s:Button x="190" y="281" label="按钮" >
<s:filters>
<s:BevelFilter
angle="45"
distance="4"
highlightAlpha="1"
highlightColor="0xFFFFFF"
shadowAlpha="1"
shadowColor="0x000000"
type="inner"
/>
</s:filters>
</s:Button>
<fx:Script>
<!--[CDATA[
import flash.filters.BitmapFilterQuality;
import flash.filters.BitmapFilterType;
import spark.filters.*;
private var myBlurFilter:BlurFilter;
public function createFilters():void {
myBlurFilter = new BlurFilter(3, 3, BitmapFilterQuality.HIGH);
b1.filters = [myBlurFilter];
}
]]-->
</fx:Script>
<!-- 另一种方式定义滤镜 -->
<s:Button x="269" y="130" label="按钮" id="b1" click="createFilters()">
最新评论