Flex4 - Effect效果总结及使用样例（附demo）
作者：hangge | 2014-12-09 10:09
1，如何触发效果（Flex4中有下列3类不同的效果触发器）：
creationCompleteEffect：组件创建完毕时触发。
focusInEffect：组件获得焦点时触发。
focusOutEffect：组件失去焦点时触发。
hideEffect：当组件的visible属性更改为false时触发。
mouseDownEffect：按下鼠标时触发。
mouseUpEffect：释放鼠标时触发。
moveEffect：组件移动时触发。
removedEffect：组件被移除时触发。
resizeEffect：组件改变大小时触发。
rollOutEffect：鼠标从组件上移开时触发。
rollOverEffect：鼠标移动到组件上时触发。
showEffect：组件的visible属性更改为true时触发。
2，Flex内置效果说明
（1）Fade效果
（1）由事件触发
addedEffect：当组件添加到容器中时触发。creationCompleteEffect：组件创建完毕时触发。
focusInEffect：组件获得焦点时触发。
focusOutEffect：组件失去焦点时触发。
hideEffect：当组件的visible属性更改为false时触发。
mouseDownEffect：按下鼠标时触发。
mouseUpEffect：释放鼠标时触发。
moveEffect：组件移动时触发。
removedEffect：组件被移除时触发。
resizeEffect：组件改变大小时触发。
rollOutEffect：鼠标从组件上移开时触发。
rollOverEffect：鼠标移动到组件上时触发。
showEffect：组件的visible属性更改为true时触发。
注意：自定义组件也可以提供效果触发器，使用下面的元数据标签即可：
[Effect(name="eventNameEffect",event="eventName")]
下面例子是，当鼠标移入图片图片会放大，移出又缩小：
<?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">
<s:layout>
<s:VerticalLayout paddingLeft="20" paddingTop="20" />
</s:layout>
<fx:Declarations>
<s:Resize id="fxEnlarge" widthTo="100" heightTo="100" />
<s:Resize id="fxShrink" widthTo="50" heightTo="50"/>
</fx:Declarations>
<s:Group width="50" height="50"
rollOverEffect="{fxEnlarge}" rollOutEffect="{fxShrink}">
<s:Rect id="box" width="100%" height="100%">
<s:fill>
<s:SolidColor color="black" />
</s:fill>
</s:Rect>
</s:Group>
</s:Application>
（2）以编程的方式应用效果
effect.play();
（3）使用状态过渡来触发效果：
下面例子是状态切换时自动调用Resize效果，而且不用指定效果属性的具体值，Transition会根据目标对象的新状态的值相应地应用这些属性。
下面例子是状态切换时自动调用Resize效果，而且不用指定效果属性的具体值，Transition会根据目标对象的新状态的值相应地应用这些属性。
<?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/halo">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="orange" />
<s:State name="black" />
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="*">
<s:Resize target="{box}" />
</s:Transition>
</s:transitions>
<s:HGroup>
<s:Button label.orange="Black" label.black="Orange">
<s:click>
<![CDATA[
currentState = (currentState == 'orange' ? 'black' : 'orange');
]]>
</s:click>
</s:Button>
</s:HGroup>
<s:Rect id="box" width="100" height="100"
width.black="50" height.black="50">
<s:fill>
<s:SolidColor color.black="#000000" color.orange="#de7800" />
</s:fill>
</s:Rect>
</s:Application>
（1）Fade效果
Fade效果就是在一定时间内改变组件的alpha属性。
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:Fade id="effect" alphaFrom="1" alphaTo="0" target="{image}" />
</fx:Declarations>
<s:BitmapImage id="image" alpha="1" source="@Embed('images/flex.jpg')" />
<s:Button id="mybutton" label="测试!" click="effect.play()" />
</s:Application>
（2）Move和Move3D效果即修改组件的x,y或z属性从一个位置移动到另一位置。下面例子是直接设置组件的xy坐标，从而通过moveEffect事件来触发Move效果:
通过改变组件的width和height来实现效果。
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:Group id="mygroup" moveEffect="Move">
<s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
</s:Group>
<s:Button id="mybutton" label="测试!">
<s:click>
<![CDATA[
mygroup.x += 50;
]]>
</s:click>
</s:Button>
</s:Application>
（3）Resize效果通过改变组件的width和height来实现效果。
（4）Scale和Scale3D效果
通过改变组件的scaleX，scaleY和scaleZ来实现效果。
通过改变组件的scaleX，scaleY和scaleZ来实现效果。
（5）Rotate效果
通过修改组件的rotationX，rotationY，rotationZ来实现效果
3，Flex核心效果类
上面的内置效果都是继承这些核心效果类的，我们也可以直接通过使用这些核心类来实现一些效果。
（1）Animate（所有效果的基类，允许进行细粒度的控制）
下面使用Animate来改变按钮宽度，和颜色，同时颜色使用插值器来进行过渡变化：
4，组合合成效果
5，Flex内置的缓动器
通过修改组件的rotation属性值来实现旋转效果，注意两个属性：
applyChangesPostLayout：控制在旋转之前还是之后应用布局更改
autoCenterTransform：控制旋转是否绕对象中心（width/2，height/2）发生
<?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">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<fx:Declarations>
<s:Rotate id="effect1" target="{image1}" angleBy="45"
applyChangesPostLayout="true" autoCenterTransform="true" />
<s:Rotate id="effect2" target="{image2}" angleBy="45"
applyChangesPostLayout="false" autoCenterTransform="true" />
</fx:Declarations>
<s:VGroup>
<s:BitmapImage id="image1" source="@Embed('images/flex.jpg')" />
<s:Button label="测试!" click="effect1.play()" />
</s:VGroup>
<s:VGroup>
<s:BitmapImage id="image2" source="@Embed('images/flex.jpg')" />
<s:Button label="测试!" click="effect2.play()" />
</s:VGroup>
</s:Application>
（6）Rotate3D效果通过修改组件的rotationX，rotationY，rotationZ来实现效果
<?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">
<s:layout>
<s:VerticalLayout />
</s:layout>
<fx:Declarations>
<s:Rotate3D id="effect1" target="{image1}" angleXFrom="0" angleXTo="360" autoCenterTransform="true" />
<s:Rotate3D id="effect2" target="{image1}" angleYFrom="0" angleYTo="360" autoCenterTransform="true" />
<s:Rotate3D id="effect3" target="{image1}" angleZFrom="0" angleZTo="360" autoCenterTransform="true" />
</fx:Declarations>
<s:BitmapImage id="image1" source="@Embed('images/flex.jpg')"/>
<s:HGroup>
<s:Button label="X" click="effect1.play()" />
<s:Button label="Y" click="effect2.play()" />
<s:Button label="Z" click="effect3.play()" />
</s:HGroup>
</s:Application>
（7）CrossFade效果
淡入淡出效果，下面给图片和按钮都使用了这个效果
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<s:states>
<s:State name="flex" />
<s:State name="flash" />
</s:states>
<fx:Declarations>
<s:CrossFade id="crossfade" targets="{[image, mybutton]}" />
</fx:Declarations>
<s:transitions>
<s:Transition effect="{crossfade}" />
</s:transitions>
<s:Group>
<s:BitmapImage id="image" source="@Embed('images/flex.jpg')"
source.flash="@Embed('images/flash.jpg')" />
</s:Group>
<s:Button id="mybutton" label="Go Flash!" label.flash="Go Flex!"
click.flash="currentState='flex'"
click.flex="currentState='flash'"/>
</s:Application>
（8）Wipe效果
遮罩滑出显示组件效果，下面例子同样对图片和按钮都使用了这个效果
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Script>
<![CDATA[
import spark.effects.WipeDirection;
]]>
</fx:Script>
<s:states>
<s:State name="flex" />
<s:State name="flash" />
</s:states>
<fx:Declarations>
<s:Wipe id="wipe" targets="{[image, mybutton]}"
direction="{directions.selectedItem as String}" />
</fx:Declarations>
<s:transitions>
<s:Transition effect="{wipe}" />
</s:transitions>
<s:Group>
<s:BitmapImage id="image" source="@Embed('images/flex.jpg')"
source.flash="@Embed('images/flash.jpg')" />
</s:Group>
<s:DropDownList id="directions" selectedIndex="0">
<s:dataProvider>
<s:ArrayList>
<fx:String>{WipeDirection.LEFT}</fx:String>
<fx:String>{WipeDirection.RIGHT}</fx:String>
<fx:String>{WipeDirection.UP}</fx:String>
<fx:String>{WipeDirection.DOWN}</fx:String>
</s:ArrayList>
</s:dataProvider>
</s:DropDownList>
<s:Button id="mybutton" label="Go Flash!" label.flash="Go Flex!"
click.flash="currentState='flex'"
click.flex="currentState='flash'"/>
</s:Application>
上面的内置效果都是继承这些核心效果类的，我们也可以直接通过使用这些核心类来实现一些效果。
（1）Animate（所有效果的基类，允许进行细粒度的控制）
下面使用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">
<fx:Script>
<![CDATA[
import spark.effects.interpolation.RGBInterpolator;
]]>
</fx:Script>
<fx:Declarations>
<s:Animate id="effect" target="{mybutton}">
<s:SimpleMotionPath property="width" valueTo="100" />
<s:SimpleMotionPath property="color" valueTo="#de7800"
interpolator="{new RGBInterpolator()}" />
</s:Animate>
</fx:Declarations>
<s:Button id="mybutton" label="点击测试!" click="effect.play();" />
</s:Application>
（2）AnimateColor（随时间推移发生变化的颜色，在每个通道上对两种颜色使用插值）
<?xml version="1.0"?>
<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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:AnimateColor id="colorEffect" targets="{[detailText, playButton]}"
colorFrom="0x0000FF" colorTo="0xFF0000" repeatCount="2" repeatBehavior="reverse"
effectStart="playButton.enabled=false" effectEnd="playButton.enabled=true;"/>
</fx:Declarations>
<s:Label id="detailText" width="200" color="blue"
text="AnimateColor效果设置 color属性随时间发生的变化的动画，
逐个通道地在给定的 from/to颜色值之间进行插补。
设置 color属性的动画时请使用此效果而不是 Animate或其他效果。"/>
<s:Button id="playButton" label="AnimateColor" click="colorEffect.play();"/>
</s:Application>
（3）AnimateFilter（滤镜效果）
a，使用模糊滤镜 - BlurFilter
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:BlurFilter id="blur"/>
<s:AnimateFilter id="effect" target="{image}" bitmapFilter="{blur}">
<s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="10"/>
<s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="10"/>
</s:AnimateFilter>
</fx:Declarations>
<s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
<s:Button id="mybutton" label="Click Me!" click="effect.play()" />
</s:Application>
b，使用发光滤镜 - GlowFilter
<?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"
creationComplete="{effect1.play();effect2.play();}">
<s:layout>
<s:HorizontalLayout paddingLeft="10" paddingTop="10" gap="20"/>
</s:layout>
<fx:Declarations>
<s:GlowFilter id="glow1" color="#de7800" />
<s:AnimateFilter id="effect1" target="{image1}" bitmapFilter="{glow1}"
repeatBehavior="reverse" repeatCount="0">
<s:SimpleMotionPath property="blurX" valueFrom="0" valueTo="20"/>
<s:SimpleMotionPath property="blurY" valueFrom="0" valueTo="20"/>
</s:AnimateFilter>
<s:GlowFilter id="glow2" blurX="20" blurY="20" color="#de7800" />
<s:AnimateFilter id="effect2" target="{image2}" bitmapFilter="{glow2}"
repeatBehavior="reverse" repeatCount="0">
<s:SimpleMotionPath property="alpha" valueFrom="0" valueTo="1"/>
</s:AnimateFilter>
</fx:Declarations>
<s:BitmapImage id="image1" source="@Embed('images/flex.jpg')"/>
<s:BitmapImage id="image2" source="@Embed('images/flex.jpg')"/>
</s:Application>
<s:sequence>：顺序执行效果
<s:parallel>：并行执行效果
<s:pause>：暂停一段时间
<s:Sequence id="effect" target="{boxes}" repeatCount="5">
<s:Parallel>
<s:Fade alphaFrom="{boxes.alpha}" alphaTo="1" />
<s:Scale scaleXTo="1" scaleXFrom="{boxes.scaleX}"
scaleYTo="1" scaleYFrom="{boxes.scaleY}"/>
</s:Parallel>
<s:Pause duration="2000" />
<s:Parallel>
<s:Fade alphaFrom="1" alphaTo="0" />
<s:Scale scaleXTo=".5" scaleXFrom="1"
scaleYTo=".5" scaleYFrom="1"/>
</s:Parallel>
</s:Sequence>
（1）Bounce：模拟目标在受重力牵引后重新弹起的过程
（2）Elastic：目标对象的移动由一个按指数衰减的正弦波定义
（3）Linear：定义分为3个阶段的缓动：加速，匀速和减速
（4）Power：使用多项式定义缓动功能
（5）Sine：使用Sine函数定义缓动功能
示例：
<?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">
<s:layout>
<s:VerticalLayout/>
</s:layout>
<fx:Declarations>
<s:Elastic id="easer" />
<s:Move id="effect" target="{image}" xFrom="0" xTo="300"
duration="4000" easer="{easer}"/>
</fx:Declarations>
<s:Group>
<s:BitmapImage id="image" source="@Embed('images/flex.jpg')" />
</s:Group>
<s:Button id="mybutton" label="Click Me!" click="effect.play()" />
</s:Application>
全部评论（0）