触发器与效果

FLEX效果 Flex的行为机制使得开发者可以很以便地为应用程序添加动画效果，从而使顾客界面更加丰富多彩。本章将简介如何在Flex应用程序中创立行为及动画效果。 9.1 什么是行为 Flex中的行为（Behavior）是由触发器（Trigger）和效果（Effect）组合而成。当顾客在界面中进行某项操作时，如单击某个按钮，触发器会被激活，从而使目的组件发生某些视觉或听觉上的变化，例如播放一段逐渐显示的动画或发出声响等。触发器可以由顾客操作触发，也可以由程序触发，一种触发器可以相应多种效果。 9.1.1 触发器与效果 触发器的使用非常简朴，可以作为MXML标记中的一种属性，也可以在标记中调用，或者在ActionScript中用setStyle()和getStyle()措施调用。触发器的名称为triggerEvent名称 + “Effect”后缀。按照这种名称商定，mouseDown事件的触发器名称为mouseDownEffect。Flex中提供的触发器名称涉及如下几种。 l addedEffect：当组件添加到容器中时触发。 l creationCompleteEffect：组件创立完毕时触发。 l focusInEffect：组件获得焦点时触发。 l focusOutEffect：组件失去焦点时触发。 l hideEffect：当组件的visible属性更改为false时触发。 l mouseDownEffect：按下鼠标时触发。 l mouseUpEffect：释放鼠标时触发。 l moveEffect：组件移动时触发。 l removedEffect：组件被移除时触发。 l resizeEffect：组件变化大小时触发。 l rollOutEffect：鼠标从组件上移开时触发。 l rollOverEffect：鼠标移动到组件上时触发。 l showEffect：组件的visible属性更改为true时触发。 Flex的动画效果由一种工厂类（Factory）和一种实例类（Instance）构成。工厂类用来解决事件、控制动画，它的名称就是效果的名称，如Zoom。一般我们在应用程序中创立一种工厂类的实例，设立必要的参数，然后将该实例与触发器关联。实例类则用来实现动画效果，当触发器被触发或调用play()措施时，工厂类创立一种实例类的实例来播放所需效果，执行结束后，该实例会被销毁，如果一种效果相应多种目的对象，每一种目的对象都会有一种自己的实例。实例类的命名规则为效果名+Instance。如之前定义的工厂类名为Zoom，那么实例类名就是ZoomInstance。Effect的这种机制，是设计模式中工厂模式的一种应用，效果执行的时候，运营的不是Zoom，而是ZoomInstance。 9.1.2 简朴效果组件 Flex中提供了丰富的效果组件。由于效果是一种根据时间渐变的过程，因此所有效果都具有duration属性，用来设立播放时间（以毫秒为单位）。也可以通过设立repeatCount属性和repeatDelay属性，来分别控制效果播放的次数和反复播放效果的时间间隔（以毫秒为单位）。如果但愿在触发器被触发后，延迟一段时间调用效果，可以使用startDelay属性。 1）AnimateProperty动画效果 AnimateProperty是用来为组件的属性或样式设立动画的效果。我们可以通过其property属性设定目的对象上需要设立动画效果的属性，然后设立fromValue属性和toValue属性，为效果提供属性的起始值和结束值。例如下面的代码使用mouseDownEffect触发器，当单击图片时，触发AnimateProperty效果，在1秒钟内，Image对象的scaleX属性由1变为2，被横向拉伸。代码如下： roperty" /> 如果但愿通过样式设立效果，可以将isStyle属性设立为ture，然后通过setStyle()措施设立目的对象的样式，从而达到设立效果的目的。 2）Blur模糊效果 Blur 是一种模糊效果。该效果使用了flash.filters.BlurFilter滤镜，如果对某个组件应用了Blur 效果，就不能再对该组件应用BlurFilter滤镜，也无法再次应用Blur效果。下面的代码通过Image对象的mouseDownEffect触发器触发Blur效果，在1秒钟内，Image对象将逐渐变得模糊。代码如下： blurYFrom="0.0" blurYTo="10.0"/> 3）Dissolve溶解效果 Dissolve是一种溶解效果。当效果开始播放时，将创立一种不透明的矩形，这个矩形悬浮在目的组件的上方，它的颜色由Dissolve.color属性设立，此时透明度为“1.0 Dissolve.alphaFrom”。随着效果的播放，该矩形的alpha属性将从(1.0 alphaFrom)逐渐变为“1.0 alphaTo”，直到效果播放完毕，矩形被销毁。 如果目的对象是一种容器，那么Dissolve效果将应用于容器内部的内容区域。 下面的代码使用一种CheckBox对象设立Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Dissolve效果： hideEffect="dissolveOut" showEffect="dissolveIn"/> 4）Fade淡入淡出效果 Fade是一种淡入淡出效果，它通过设立组件的alpha属性来实现动画效果。当使用showEffect或hideEffect触发器设立Fade效果时，如果省略了alphaFrom和alphaTo属性的值，那么在showEffect触发器上目的对象的透明度将从 0变化到目的的目前alpha值，而在hideEffect触发器上则会从目前的alpha 值变化到0。如果要对字体使用Fade效果，必须使用嵌入字体。 下面的代码使用一种CheckBox对象设立Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Fade效果： hideEffect="fadeOut" showEffect="fadeIn"/> 5）Glow发光效果 Glow是一种发光效果，该效果使用了flash.filters.GlowFilter滤镜类。如果对某个组件应用了Glow效果，就不能对该组件应用GlowFilter滤镜，也无法再次应用Glow效果。下面的代码通过Image对象的mouseDownEffect触发器触发Glow效果： blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x 00FF00"/> 6）Iris虹效果 Iris效果通过扩展或收缩集中在目的上的矩形遮罩为效果目的设立动画。该效果可以从目的的中心放大遮罩来显示目的，也可以向中心收缩遮罩来隐藏目的。下面的代码使用一种CheckBox对象设立Image的visible属性，通过hideEffect和showEffect触发器分别触发各自的Iris效果： showEffect="irisIn" hideEffect="irisOut"/> 7）Move移动效果 Move效果用来实现移动动画。在给定期间内，组件的位置会随时间变化而变化。使用该效果一般需要用到如下几种属性。 l xFrom和yFrom属性用来指定初始位置。 l xTo和yTo属性用来指定目的位置。 l xBy和yBy用来指定移动量，即组件在x轴向和y轴向上的移动速度。 一般只需要指定初始位置、目的位置或移动量这些值中的任意2个， Flex就会计算第3个值。如果指定所有这3个值，Flex就会忽视xBy和yBy值。如果仅指定xTo和yTo值或xBy和yBy值，那么Flex会将xFrom和yFrom设立为对象的目前位置。 下面的程序演示了如何使用Move效果。 代码清单 MoveSample.mxml "0" layout="absolute" mouseDown="moveImage();"> /当按下鼠标时调用该事件 private function moveImage():void /停止播放Move效果 moveEffect.end(); /设立目的位置 moveEffect.xTo=mouseX; moveEffect.yTo=mouseY; /播放Move效果 moveEffect.play(); > 代码中将Application的layout属性设立为absolute，当顾客在应用程序中任何位置上单击鼠标时，调用moveImage措施，该措施中一方面停止Move效果，然后根据鼠标单击的位置设立目的位置，最后播放效果。 一般Move效果应用于使用绝对定位的容器（如 Canvas）或使用“layout=absolute”的容器（如 Application或Panel）中。如果需要将其应用到自动布局的容器（如VBox或 Grid容器）中，虽然会移动目的对象，但下次容器更新其布局时，会将目的对象移回其原始位置。在这种状况下，可以将容器的autoLayout属性设立为false来严禁往回移动，但这会禁用容器中所有控件的布局。 8）Pause暂停效果 Pause效果可以实目前指定期间段内不执行任何操作的功能。如果将Pause效果添加为 Sequence效果的子项，可以创立2个其她效果之间的暂停。 9）Resize大小调节效果 Resize效果用来变化组件的大小。与Move效果相似，Resize效果可以指定初始大小（widthFrom、heightFrom）、目的大小（widthTo、heightTo）和变化量（widthBy、heightBy），其使用规则也与Move效果的初始位置、目的位置和移动量的使用规则相似。下面的代码演示了Resize效果的使用措施： 此外hideChildrenTargets属性用来隐藏Panel容器的其她子项，当我们对Panel容器中的子项应用Resize效果时，默认状况下Panel会反复计算子项的大小和位置以调节布局，如果将这个属性设为true，可以让Panel容器在播放动画时不做这种计算，直到播放完毕，这样可以节省系统资源。 10）Rotate旋转效果 Rotate是一种旋转效果，使组件环绕指定的点旋转。Rotate可以指定旋转中心的坐标（originX和originY属性）及旋转的起始角度（angleFrom属性）和最后角度（angleTo属性）。起始旋转角度的有效值范畴是0360，而最后角度则可以是正值也可以是负值，默认值为360。如果angleTo的值比angleFrom的值小，则目的沿逆时针方向旋转，否则以顺时针方向旋转。代码如下： duration=""/> 此外有时需要设立hideFocusRing属性，以拟定在开始播放效果时，效果与否应隐藏对焦环。该属性默认值为true。对于组件而言，对焦环已经被自动隐藏。如果Rotate效果应用于那些不是以UIComponent为基类目的对象，就必须隐藏对焦环。 需要注意的是， hideFocusRing属性在以Effect为基类的效果类中，默认值为false，而在以MaskEffect为基类效果类中，默认值为true。 11）SoundEffect声音效果 SoundEffect效果用来播放MP3音频文献。我们可以通过source属性指定要播放的MP3文献，可以直接设立该文献的URL，或是由Embed核心字嵌入MP3文献的Class对象。 SoundEffect效果的属性涉及如下几种。 l autoLoad 属性用来设立与否自动加载MP3文献，默认值为true。 l bufferTime 属性用来设立声音对象的缓冲时间。默认值为 1000，单位为毫秒。 l isLoading如果已加载MP3，则该属性为true。 l loops 属性用来设立循环次数，默认值为0。 l panEasingFunction 属性用来设立声音均衡效果的缓动函数。 l panFrom属性和panTo属性用来设立声音对象的起始和最后平移，取值范畴在-1.01.0之间，其中-1.0表达仅使用左声道，1.0 表达仅使用右声道，而0.0表达在2个声道间平均地均衡声音。 l sound 属性表达已加载MP3文献的声音对象。 l source 属性表达要播放的MP3文献的URL或类。 l startTime 属性用来设立开始播放时间（以毫秒为单位），默认值为0。 l useDuration 属性表达与否根据duration属性指定的时间停止播放，如果为false，则会在MP3完毕播放或循环后停止效果，默认值为 true。 l volumeEasingFunction 属性用来设立音量效果的缓动函数。 l volumeFrom 属性和volumeTo属性用来设立声音对象的初始和最后音量，取值范畴在0.01.0之间，默认值为1。 在下面的代码所示的例子中，当应用程序创立完毕后开始播放声音文献，声音从左声道过渡到右声道。 代码清单 SoundSample.mxmlcreationCompleteEffect="mySound"> duration="10000" useDuration="false" panFrom="-1" panTo="1" source="Embed(source=assets/bumperc.mp3)"/> 12）WipeUp、WipeRight、WipeDown、WipeLeft擦除效果 这些类定义了4个方向的擦除效果，一般与showEffect和hideEffect触发器配合使用，使用起来非常简便，如下面的例子。 代码清单 WipeSample.mxml lected"> hideEffect="wipeUpOut" showEffect="wipeUpIn"/> lected"> hideEffect="wipeLeftOut" showEffect="wipeLeftIn"/> lected"> hideEffect="wipeDownOut" showEffect="wipeDownIn"/> lected"> hideEffect="wipeRightOut" showEffect="wipeRightIn"/> 13）Zoom缩放效果 Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是，Resize变化目的对象的长宽属性，而Zoom变化的目的对象的缩放比例。在下面的例子中，当鼠标移动到图片上时开始播放Zoom效果，鼠标移出时还原。 代码清单 ZoomSample.mxml import flash.events.MouseEvent; /鼠标事件解决函数 public function doZoom(event:MouseEvent):void /如果已经在播放效果了, 则反向播放效果 if (zoom.isPlaying) zoom.reverse(); /否则播放效果 else zoom.play(event.target,event.type=MouseEvent.ROLL_OUT?true:false); > zoomWidthTo="2"zoomHeightTo="2"zoomWidthFrom=".5"zoomHeightFrom=".5 "/> paddingTop="5"paddingLeft="10"paddingRight="10"paddingBottom="5"> 9.1.3 复合效果组件 诸多时候需要同步执行或按顺序执行多种动画效果，此时可以用Parallel和Sequence效果。 1）Parallel平行播放效果 Parallel效果可以同步播放多种子效果，下面例子中的Parallel效果涉及了Move和Resize效果，单击“Expend”按钮时图片将放大并发生位移，单击“Contract”按钮则返回原位置，并逐渐缩小为初始大小。 代码清单 ParallelSample.mxmlsource="Embed(source=assets/icon1.png)"/> 2）Sequence顺序播放效果 Sequence效果中可以顺序添加多种子效果，并以子效果的添加顺序依次播放。下面的代码演示了Sequence效果的使用方式： 在这个例子里，当顾客在Canvas中按下鼠标时，会依次调用Sequence中的各个子效果，一方面Image对象会右移一段距离，然后暂停2秒，再左移回到本来位置