Flex中提供了丰富的效果组件。因为效果是一种依据时间渐变的过程,因此全部效果都具有duration属性,用来设置播放时间(以毫秒为单位)。也能够通过设置repeatCount属性和repeatDelay属性,来分别控制效果播放的次数和重复播放效果的时间间隔(以毫秒为单位)。假设希望在触发器被触发后,延迟一段时间调用效果,能够使用startDelay属性。
1)Flex特效之AnimateProperty动画效果
AnimateProperty是用来为组件的属性或样式设置动画的效果。我们能够通过其property属性设定目标对象上须要设置动画效果的属性,然后设置fromValue属性和toValue属性,为效果提供属性的起始值和结束值。比如以下的代码使用mouseDownEffect触发器,当单击图片时,触发AnimateProperty效果,在1秒钟内,Image对象的scaleX属性由1变为2,被横向拉伸。代码例如以下:
1. <mx:AnimateProperty idmx:AnimatePropertyid="animateProperty"property="scaleX"fromValue="1
2.
3. "toValue="2"
4.
5. duration="1000"/>
6.
7. <mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{animateP
8.
9. roperty}"/>
10.
假设希望通过样式设置效果,能够将isStyle属性设置为ture,然后通过setStyle()方法设置目标对象的样式,从而达到设置效果的目的。
2)Flex特效之Blur模糊效果
Blur是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜,假设对某个组件应用了Blur效果,就不能再对该组件应用BlurFilter滤镜,也无法再次应用Blur效果。以下的代码通过Image对象的mouseDownEffect触发器触发Blur效果,在1秒钟内,Image对象将逐渐变得模糊。代码例如以下:
1. <mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0"blurXTo="10.0"
2.
3. blurYFrom="0.0"blurYTo="10.0"/>
4.
5. <mx:Imageidmx:Imageid="img"source="assets/plane.png"mouseDownEffect="{blurImage}"/>
3)Flex特效之Dissolve溶解效果
Dissolve是一种溶解效果。当效果開始播放时,将创建一个不透明的矩形,这个矩形悬浮在目标组件的上方,它的颜色由Dissolve.color属性设置,此时透明度为“1.0-Dissolve.alphaFrom”。随着效果的播放,该矩形的alpha属性将从(1.0-alphaFrom)逐渐变为“1.0–alphaTo”,直到效果播放完毕,矩形被销毁。
假设目标对象是一个容器,那么Dissolve效果将应用于容器内部的内容区域。
以下的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Dissolve效果:
6. <mx:Dissolveidmx:Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0"alphaTo="0
7.
8. .0"/>
9.
10. <mx:Dissolveidmx:Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0"alphaTo="1.
11.
12. 0"/>
13.
14. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>
15.
16. <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"
17.
18. hideEffect="{dissolveOut}"showEffect="{dissolveIn}"/>
4)Flex特效之Fade淡入淡出效果
Fade是一种淡入淡出效果,它通过设置组件的alpha属性来实现动画效果。当使用showEffect或hideEffect触发器设置Fade效果时,假设省略了alphaFrom和alphaTo属性的值,那么在showEffect触发器上目标对象的透明度将从0变化到目标的当前alpha值,而在hideEffect触发器上则会从当前的alpha值变化到0。假设要对字体使用Fade效果,必须使用嵌入字体。
以下的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Fade效果:
1. <mx:Fadeidmx:Fadeid="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/>
2.
3. <mx:Fadeidmx:Fadeid="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/>
4.
5. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>
6.
7. <mx:Imagesourcemx:Imagesource="assets/plane.png"visible="{cbx.selected}"
8.
9. hideEffect="{fadeOut}"showEffect="{fadeIn}"/>
5)Flex特效之Glow发光效果
Glow是一种发光效果,该效果使用了flash.filters.GlowFilter滤镜类。假设对某个组件应用了Glow效果,就不能对该组件应用GlowFilter滤镜,也无法再次应用Glow效果。以下的代码通过Image对象的mouseDownEffect触发器触发Glow效果:
10. <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0"alphaTo="0.3"
11.
12. blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x
13.
14. 00FF00"/>
15.
16. <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/>
6)Flex特效之Iris虹效果
Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果能够从目标的中心放大遮罩来显示目标,也能够向中心收缩遮罩来隐藏目标。以下的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Iris效果:
17. <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/>
18.
19. <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/>
20.
21. <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"visible="{cbx.selected}"
22.
23. showEffect="{irisIn}"hideEffect="{irisOut}"/>
24.
25. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>
7)Flex特效之Move移动效果
Move效果用来实现移动动画。在给定时间内,组件的位置会随时间变化而变化。使用该效果通常须要用到以下几个属性。
lxFrom和yFrom属性用来指定初始位置。
lxTo和yTo属性用来指定目标位置。
lxBy和yBy用来指定移动量,即组件在x轴向和y轴向上的移动速度。
通常仅仅须要指定初始位置、目标位置或移动量这些值中的随意2个,Flex就会计算第3个值。假设指定全部这3个值,Flex就会忽略xBy和yBy值。假设仅指定xTo和yTo值或xBy和yBy值,那么Flex会将xFrom和yFrom设置为对象的当前位置。
以下的程序演示了怎样使用Move效果。
代码清单MoveSample.mxml
26. <?xmlversionxmlversion="1.0"?>
27.
28. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft=
29.
30. "0"
31.
32. layout="absolute"mouseDown="moveImage();">
33.
34. <mx:Script>
35.
36. <![CDATA[
37.
38. //当按下鼠标时调用该事件
39.
40. privatefunctionmoveImage():void{
41.
42. //停止播放Move效果
43.
44. moveEffect.end();
45.
46. //设置目标位置
47.
48. moveEffect.xTo=mouseX;
49.
50. moveEffect.yTo=mouseY;
51.
52. //播放Move效果
53.
54. moveEffect.play();
55.
56. }
57.
58. ]]>
59.
60. </mx:Script>
61.
62. <mx:Moveidmx:Moveid="moveEffect"target="{img}"/>
63.
64. <mx:Imageidmx:Imageid="img"source="assets/plane.png"/>
65.
66. </mx:Application>
67.
代码中将Application的layout属性设置为absolute,当用户在应用程序中不论什么位置上单击鼠标时,调用moveImage方法,该方法中首先停止Move效果,然后依据鼠标单击的位置设置目标位置,最后播放效果。
通常Move效果应用于使用绝对定位的容器(如Canvas)或使用“layout=absolute”的容器(如Application或Panel)中。假设须要将其应用到自己主动布局的容器(如VBox或Grid容器)中,尽管会移动目标对象,但下次容器更新其布局时,会将目标对象移回其原始位置。在这样的情况下,能够将容器的autoLayout属性设置为false来禁止往回移动,但这会禁用容器中全部控件的布局。
8)Flex特效之Pause暂停效果
Pause)Flex特效之Resize大小调整效果
Resize)Flex特效之Rotate旋转效果
Rotate)Flex特效之SoundEffect声音效果
SoundEffect)Flex特效之WipeUp、WipeRight、WipeDown、WipeLeft擦除效果
这些类定义了4个方向的擦除效果,通常与showEffect和hideEffect触发器配合使用,使用起来很简便,如以下的样例。
代码清单WipeSample.mxml
1. <?xmlversionxmlversion="1.0"?>
2.
3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
4.
5. <!--定义擦除效果-->
6.
7. <mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/>
8.
9. <mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/>
10.
11. <mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/>
12.
13. <mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/>
14.
15. <mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/>
16.
17. <mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/>
18.
19. <mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/>
20.
21. <mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/>
22.
23. <mx:Paneltitlemx:Paneltitle="WipeEffects">
24.
25. <mx:HBoxwidthmx:HBoxwidth="100%">
26.
27. <!--向上擦除-->
28.
29. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se
30.
31. lected}"
32.
33. hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/>
34.
35. <!--向左擦除-->
36.
37. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se
38.
39. lected}"
40.
41. hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/>
42.
43. <!--向下擦除-->
44.
45. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se
46.
47. lected}"
48.
49. hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/>
50.
51. <!--向右擦除-->
52.
53. <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se
54.
55. lected}"
56.
57. hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/>
58.
59. </mx:HBox>
60.
61. <mx:ControlBar>
62.
63. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>
64.
65. </mx:ControlBar>
66.
67. </mx:Panel>
68.
69. </mx:Application>
70.
执行该程序,效果如图9-2所看到的。
图9-2擦除效果
13)Flex特效之Zoom缩放效果
Zoom效果能够以指定点为中心按比例缩放对象。与Resize效果不同的是,Resize改变目标对象的长宽属性,而Zoom改变的目标对象的缩放比例。在以下的样例中,当鼠标移动到图片上时開始播放Zoom效果,鼠标移出时还原。
代码清单ZoomSample.mxml
71. <?xmlversionxmlversion="1.0"encoding="utf-8"?>
72.
73. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">
74.
75. <mx:Script>
转自:http://www.cnblogs.com/csharponworking/archive/2011/04/07/2008826.html
因为代码的空格和换行都处理掉了,代码还被隐藏了很多,凑合看吧。。
清楚的去原文地址看吧