flex 4.0 滤镜效果.

动态滤镜效果:

 

flex 4.0 动态滤镜包含在 spark.effects 包中.

滤镜列表:http://help.adobe.com/zh_CN/AS3LCR/Flex_4.0/spark/effects/package-detail.html

 

 

 

动画滤镜定义与调用:

<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:Applicationxmlns: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()">