如何使用Flex效果组件

小编给大家分享一下如何使用Flex效果组件，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！

Flex效果组件

Flex中提供了丰富的效果组件。由于Flex效果是一种根据时间渐变的过程，因此所有效果都具有duration属性，用来设置播放时间（以毫秒为单位）。也可以通过设置repeatCount属性和repeatDelay属性，来分别控制效果播放的次数和重复播放效果的时间间隔（以毫秒为单位）。如果希望在触发器被触发后，延迟一段时间调用Flex效果组件，可以使用startDelay属性。

1）AnimateProperty动画效果

Flex效果组件中AnimateProperty是用来为组件的属性或样式设置动画的效果。我们可以通过其property属性设定目标对象上需要设置动画效果的属性，然后设置fromValue属性和toValue属性，为效果提供属性的起始值和结束值。例如下面的代码使用mouseDownEffect触发器，当单击图片时，触发AnimateProperty效果，在1秒钟内，Image对象的scaleX属性由1变为2，被横向拉伸。代码如下：

<mx:AnimatePropertyidmx:AnimatePropertyid="animateProperty"property="scaleX"  fromValue="1   "toValue="2"  duration="1000"/>  <mx:Imageidmx:Imageid="img"source="assets/plane.png"  mouseDownEffect="{animateProperty}"/>

如果希望通过样式设置效果，可以将isStyle属性设置为ture，然后通过setStyle()方法设置目标对象的样式，从而达到设置效果的目的。

2）Blur模糊效果

Flex效果组件中Blur是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜，如果对某个组件应用了Blur效果，就不能再对该组件应用BlurFilter滤镜，也无法再次应用Blur效果。下面的代码通过Image对象的mouseDownEffect触发器触发Blur效果，在1秒钟内，Image对象将逐渐变得模糊。代码如下：

<mx:Bluridmx:Blurid="blurImage"duration="1000"blurXFrom="0.0" blurXTo="10.0"  blurYFrom="0.0"blurYTo="10.0"/>  <mx:Imageidmx:Imageid="img"source="assets/plane.png"  mouseDownEffect="{blurImage}"/>

3）WipeUp、WipeRight、WipeDown、WipeLeft擦除效果

Flex效果中这些类定义了4个方向的擦除效果，通常与showEffect和hideEffect触发器配合使用，使用起来非常简便，如下面的例子。

代码清单WipeSample.mxml

<?xmlversionxmlversion="1.0"?>  <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">  <!--定义擦除效果-->  <mx:WipeUpidmx:WipeUpid="wipeUpOut"duration="1000"/>  <mx:WipeUpidmx:WipeUpid="wipeUpIn"duration="1000"/>  <mx:WipeLeftidmx:WipeLeftid="wipeLeftOut"duration="1000"/>  <mx:WipeLeftidmx:WipeLeftid="wipeLeftIn"duration="1000"/>  <mx:WipeDownidmx:WipeDownid="wipeDownOut"duration="1000"/>  <mx:WipeDownidmx:WipeDownid="wipeDownIn"duration="1000"/>  <mx:WipeRightidmx:WipeRightid="wipeRightOut"duration="1000"/>  <mx:WipeRightidmx:WipeRightid="wipeRightIn"duration="1000"/>  <mx:Paneltitlemx:Paneltitle="WipeEffects">  <mx:HBoxwidthmx:HBoxwidth="100%">  <!--向上擦除-->  <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon1.png')"visible="{cbx.se   lected}"   hideEffect="{wipeUpOut}"showEffect="{wipeUpIn}"/>  <!--向左擦除-->  <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon2.png')"visible="{cbx.se   lected}"   hideEffect="{wipeLeftOut}"showEffect="{wipeLeftIn}"/>  <!--向下擦除-->  <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon3.png')"visible="{cbx.se   lected}"   hideEffect="{wipeDownOut}"showEffect="{wipeDownIn}"/>  <!--向右擦除-->  <mx:Imagesourcemx:Imagesource="@Embed(source='assets/icon4.png')"visible="{cbx.se   lected}"   hideEffect="{wipeRightOut}"showEffect="{wipeRightIn}"/>  </mx:HBox>  <mx:ControlBar>  <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/>  </mx:ControlBar>  </mx:Panel>  </mx:Application>

4）Zoom缩放效果

Flex效果组件中Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是，Resize改变目标对象的长宽属性，而Zoom改变的目标对象的缩放比例。在下面的例子中，当鼠标移动到图片上时开始播放Zoom效果，鼠标移出时还原。

代码清单ZoomSample.mxml

<?xmlversionxmlversion="1.0"encoding="utf-8"?>  <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml">  <mx:Script>

以上是“如何使用Flex效果组件”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！