常见的Flex效果图

 

本文和大家重点讨论一下Flex效果组件的使用,Flex中提供了丰富的效果组件。由于Flex效果是一种根据时间渐变的过程,因此所有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。

Flex效果组件

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

1)Glow发光效果

Flex效果中Glow是一种发光效果,该效果使用了flash.filters.GlowFilter滤镜类。如果对某个组件应用了Glow效果,就不能对该组件应用GlowFilter滤镜,也无法再次应用Glow效果。下面的代码通过Image对象的mouseDownEffect触发器触发Glow效果:

 
 
  1. <mx:Glowidmx:Glowid="glowImage"duration="1000"alphaFrom="1.0" 
  2.  
  3. alphaTo="0.3"blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0" 
  4.  
  5. color="0x00FF00"/> 
  6.  
  7. <mx:Imagesourcemx:Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/> 

2)Iris虹效果

IFlex效果中ris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。该效果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标。下面的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect和showEffect触发器分别触发各自的Iris效果:

 
 
  1. <mx:Irisidmx:Irisid="irisOut"duration="1000"showTarget="true"/> 
  2.  
  3. <mx:Irisidmx:Irisid="irisIn"duration="1000"showTarget="false"/> 
  4.  
  5. <mx:Imageidmx:Imageid="Flex"source="assets/plane.png"  
  6.  
  7. visible="{cbx.selected}"showEffect="{irisIn}"hideEffect="{irisOut}"/> 
  8.  
  9. <mx:CheckBoxidmx:CheckBoxid="cbx"label="visible"selected="true"/> 

3)Move移动效果

Flex效果中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

 
 
  1. <?xmlversionxmlversion="1.0"?> 
  2.  
  3. <mx:Applicationxmlns:mxmx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml" 
  4.  
  5. paddingLeft="0"layout="absolute"mouseDown="moveImage();"> 
  6.  
  7. <mx:Script> 
  8.  
  9. <![CDATA[  
  10.  
  11. //当按下鼠标时调用该事件  
  12.  
  13. privatefunctionmoveImage():void{  
  14.  
  15. //停止播放Move效果  
  16.  
  17. moveEffect.end();  
  18.  
  19. //设置目标位置  
  20.  
  21. moveEffect.xTo=mouseX;  
  22.  
  23. moveEffect.yTo=mouseY;  
  24.  
  25. //播放Move效果  
  26.  
  27. moveEffect.play();  
  28.  
  29. }  
  30.  
  31. ]]> 
  32.  
  33. </mx:Script> 
  34.  
  35. <mx:Moveidmx:Moveid="moveEffect"target="{img}"/> 
  36.  
  37. <mx:Imageidmx:Imageid="img"source="assets/plane.png"/> 
  38.  
  39. </mx:Application> 
  40.  

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

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

4)Pause暂停效果

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值