Flex4 - Effect效果总结及使用样例(附demo)
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>