• Flex 之特效


    一直以来只是侧重于flex 的应用程序的编写,但是忘了他是胖客户端的良好的表现形式,这里总结了一些特效的使用。

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

    1Flex特效之AnimateProperty动画效果

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

    1.             <mx:AnimatePropertyidmx: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()方法设置目标对象的样式,从而达到设置效果的目的。

    2Flex特效之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}"/> 

    3Flex特效之Dissolve溶解效果

    Dissolve是一种溶解效果。当效果开始播放时,将创建一个不透明的矩形,这个矩形悬浮在目标组件的上方,它的颜色由Dissolve.color属性设置,此时透明度为“1.0-Dissolve.alphaFrom”。随着效果的播放,该矩形的alpha属性将从(1.0-alphaFrom)逐渐变为“1.0–alphaTo”,直到效果播放完成,矩形被销毁。

    如果目标对象是一个容器,那么Dissolve效果将应用于容器内部的内容区域。

    下面的代码使用一个CheckBox对象设置Imagevisible属性,通过hideEffectshowEffect触发器分别触发各自的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}"/> 

    4Flex特效之Fade淡入淡出效果

    Fade是一种淡入淡出效果,它通过设置组件的alpha属性来实现动画效果。当使用showEffecthideEffect触发器设置Fade效果时,如果省略了alphaFromalphaTo属性的值,那么在showEffect触发器上目标对象的透明度将从0变化到目标的当前alpha值,而在hideEffect触发器上则会从当前的alpha值变化到0。如果要对字体使用Fade效果,必须使用嵌入字体。

    下面的代码使用一个CheckBox对象设置Imagevisible属性,通过hideEffectshowEffect触发器分别触发各自的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}"/> 

    5Flex特效之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}"/> 

    6Flex特效之Iris虹效果

    Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标。下面的代码使用一个CheckBox对象设置Imagevisible属性,通过hideEffectshowEffect触发器分别触发各自的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"/> 

    7Flex特效之Move移动效果

    Move效果用来实现移动动画。在给定时间内,组件的位置会随时间变化而变化。使用该效果通常需要用到以下几个属性。

    lxFromyFrom属性用来指定初始位置。

    lxToyTo属性用来指定目标位置。

    lxByyBy用来指定移动量,即组件在x轴向和y轴向上的移动速度。

    通常只需要指定初始位置、目标位置或移动量这些值中的任意2个,Flex就会计算第3个值。如果指定所有这3个值,Flex就会忽略xByyBy值。如果仅指定xToyTo值或xByyBy值,那么Flex会将xFromyFrom设置为对象的当前位置。

    下面的程序演示了如何使用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.           

    代码中将Applicationlayout属性设置为absolute,当用户在应用程序中任何位置上单击鼠标时,调用moveImage方法,该方法中首先停止Move效果,然后根据鼠标单击的位置设置目标位置,最后播放效果。

    通常Move效果应用于使用绝对定位的容器(如Canvas)或使用“layout=absolute”的容器(如ApplicationPanel)中。如果需要将其应用到自动布局的容器(如VBoxGrid容器)中,虽然会移动目标对象,但下次容器更新其布局时,会将目标对象移回其原始位置。在这种情况下,可以将容器的autoLayout属性设置为false来禁止往回移动,但这会禁用容器中所有控件的布局。

    8Flex特效之Pause暂停效果

    Pause效果可以实现在指定时间段内不执行任何操作的功能。如果将Pause效果添加为Sequence效果的子项,可以创建2个其他效果之间的暂停。

    9Flex特效之Resize大小调整效果

    Resize效果用来改变组件的大小。与Move效果相似,Resize效果可以指定初始大小(widthFromheightFrom)、目标大小(widthToheightTo)和变化量(widthByheightBy),其使用规则也与Move效果的初始位置、目标位置和移动量的使用规则相似。下面的代码演示了Resize效果的使用方法:

    1.             <mx:Resizeidmx:Resizeid="expand"target="{img}"widthTo="100"heightTo="160"/> 
    2.              
    3.             <mx:Resizeidmx:Resizeid="contract"target="{img}"widthTo="25"heightTo="40"/> 
    4.              
    5.             <mx:ControlBar> 
    6.              
    7.             <mx:Buttonlabelmx:Buttonlabel="Expand"click="expand.end();expand.play();"/> 
    8.              
    9.             <mx:Buttonlabelmx:Buttonlabel="Contract"click="contract.end();contract.play();"/> 
    10.           
    11.          </mx:ControlBar> 
    12.           
    13.          <mx:Imageidmx:Imageid="img"width="25"height="40"source="assets/icon01.png"/> 
    14.           

    另外hideChildrenTargets属性用来隐藏Panel容器的其他子项,当我们对Panel容器中的子项应用Resize效果时,默认情况下Panel会反复计算子项的大小和位置以调整布局,如果将这个属性设为true,可以让Panel容器在播放动画时不做这种计算,直到播放完成,这样可以节约系统资源。

    10Flex特效之Rotate旋转效果

    Rotate是一种旋转效果,使组件围绕指定的点旋转。Rotate可以指定旋转中心的坐标(originXoriginY属性)及旋转的起始角度(angleFrom属性)和最终角度(angleTo属性)。起始旋转角度的有效值范围是0360,而最终角度则可以是正值也可以是负值,默认值为360。如果angleTo的值比angleFrom的值小,则目标沿逆时针方向旋转,否则以顺时针方向旋转。代码如下:

    15.          <mx:Rotateidmx:Rotateid="rotate"angleFrom="-45"angleTo="0"target="{img}"  
    16.           
    17.          duration="2000"/> 
    18.           
    19.          <mx:Imageidmx:Imageid="img"source="assets/plane.png"addedEffect="rotate"/> 
    20.           

    另外有时需要设置hideFocusRing属性,以确定在开始播放效果时,效果是否应隐藏对焦环。该属性默认值为true。对于组件而言,对焦环已经被自动隐藏。如果Rotate效果应用于那些不是以UIComponent为基类目标对象,就必须隐藏对焦环。

    需要注意的是,hideFocusRing属性在以Effect为基类的效果类中,默认值为false,而在以MaskEffect为基类效果类中,默认值为true

    11Flex特效之SoundEffect声音效果

    SoundEffect效果用来播放MP3音频文件。我们可以通过source属性指定要播放的MP3文件,可以直接设置该文件的URL,或是由Embed关键字嵌入MP3文件的Class对象。

    SoundEffect效果的属性包括以下几个。

    lautoLoad属性用来设置是否自动加载MP3文件,默认值为true

    lbufferTime属性用来设置声音对象的缓冲时间。默认值为1000,单位为毫秒。

    lisLoading如果已加载MP3,则该属性为true

    lloops属性用来设置循环次数,默认值为0

    lpanEasingFunction属性用来设置声音均衡效果的缓动函数。

    lpanFrom属性和panTo属性用来设置声音对象的起始和最终平移,取值范围在-1.01.0之间,其中-1.0表示仅使用左声道,1.0表示仅使用右声道,而0.0表示在2个声道间平均地均衡声音。

    lsound属性表示已加载MP3文件的声音对象。

    lsource属性表示要播放的MP3文件的URL或类。

    lstartTime属性用来设置开始播放时间(以毫秒为单位),默认值为0

    luseDuration属性表示是否根据duration属性指定的时间停止播放,如果为false,则会在MP3完成播放或循环后停止效果,默认值为true

    lvolumeEasingFunction属性用来设置音量效果的缓动函数。

    lvolumeFrom属性和volumeTo属性用来设置声音对象的初始和最终音量,取值范围在0.01.0之间,默认值为1

    在下面的代码所示的例子中,当应用程序创建完成后开始播放声音文件,声音从左声道过渡到右声道。

    代码清单SoundSample.mxml

    1.             <?xmlversionxmlversion="1.0"?> 
    2.              
    3.             <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
    4.              
    5.             creationCompleteEffect="{mySound}"> 
    6.              
    7.             <mx:SoundEffectidmx:SoundEffectid="mySound" 
    8.              
    9.             duration="10000" 
    10.           
    11.          useDuration="false" 
    12.           
    13.          panFrom="-1"panTo="1"  
    14.           
    15.          source="@Embed(source='assets/bumperc.mp3')"/> 
    16.           
    17.          </mx:Application> 

    12Flex特效之WipeUpWipeRightWipeDownWipeLeft擦除效果

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

    代码清单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擦除效果

    13Flex特效之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> 

  • 相关阅读:
    软工试水日报 3/7
    软工试水日报 3/6
    软工试水日报 3/5
    软工试水日报 3/4
    软工试水日报 3/3
    大二下学期每日总结之第一次个人作业(第二阶段:生成excel)
    大二下学期每日总结之第一次个人作业(第一阶段)
    大二下学期每日总结之第一次个人作业(第一阶段)
    大二下学期每日总结
    大二下学期每日总结
  • 原文地址:https://www.cnblogs.com/csharponworking/p/2008826.html
Copyright © 2020-2023  润新知