Flex之特效详解.docx
- 文档编号:23361689
- 上传时间:2023-05-16
- 格式:DOCX
- 页数:23
- 大小:67.09KB
Flex之特效详解.docx
《Flex之特效详解.docx》由会员分享,可在线阅读,更多相关《Flex之特效详解.docx(23页珍藏版)》请在冰豆网上搜索。
Flex之特效详解
此文除了特效接口,触发,后面还有相关特效的详解代码
本文和大家重点讨论一下Flex特效,Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩。
本文将介绍如何在Flex应用程序中创建行为及动画效果。
Flex特效讲解
Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩。
本章将介绍如何在Flex应用程序中创建行为及动画效果。
1.什么是Flex行为
Flex中的行为(Behavior)是由触发器(Trigger)和效果(Effect)组合而成。
当用户在界面中进行某项操作时,如单击某个按钮,触发器会被激活,从而使目标组件发生某些视觉或听觉上的变化,例如播放一段逐渐显示的动画或发出声响等。
触发器可以由用户操作触发,也可以由程序触发,一个触发器可以对应多个效果。
1.1触发器与效果
触发器的使用非常简单,可以作为MXML标记中的一个属性,也可以在 Style>标记中调用,或者在ActionScript中用setStyle()和getStyle()方法调用。 触发器的名称为triggerEvent名称+“Effect”后缀。 按照这种名称约定,mouseDown事件的触发器名称为mouseDownEffect。 Flex中提供的触发器名称包括以下几种。 laddedEffect: 当组件添加到容器中时触发。 lcreationCompleteEffect: 组件创建完毕时触发。 lfocusInEffect: 组件获得焦点时触发。 lfocusOutEffect: 组件失去焦点时触发。 lhideEffect: 当组件的visible属性更改为false时触发。 lmouseDownEffect: 按下鼠标时触发。 lmouseUpEffect: 释放鼠标时触发。 lmoveEffect: 组件移动时触发。 lremovedEffect: 组件被移除时触发。 lresizeEffect: 组件改变大小时触发。 lrollOutEffect: 鼠标从组件上移开时触发。 lrollOverEffect: 鼠标移动到组件上时触发。 lshowEffect: 组件的visible属性更改为true时触发。 Flex的动画效果由一个工厂类(Factory)和一个实例类(Instance)构成。 工厂类用来处理事件、控制动画,它的名称就是效果的名称,如Zoom。 通常我们在应用程序中创建一个工厂类的实例,设置必要的参数,然后将该实例与触发器关联。 实例类则用来实现动画效果,当触发器被触发或调用play()方法时,工厂类创建一个实例类的实例来播放所需效果,执行结束后,该实例会被销毁,如果一个效果对应多个目标对象,每一个目标对象都会有一个自己的实例。 实例类的命名规则为效果名+Instance。 如之前定义的工厂类名为Zoom,那么实例类名就是ZoomInstance。 Effect的这种机制,是设计模式中工厂模式的一种应用,效果执行的时候,运行的不是Zoom,而是ZoomInstance。 下面的图9-1分别表现了工厂类和实例类的层级关系。 Effect类是一个抽象基类,是定义所有效果的基本工厂类。 EffectInstance类是定义所有效果实例子类的基类。 在应用程序中不会创建Effect类本身的实例,而是创建一个子类的实例,如Mask或Tween。 图9-1工厂类与实例类 2.mx.effects mx.effects 接口 接口 说明 IAbstractEffect IAbstractEffect接口用于指示某个属性或参数必须属于类型Effect,但实际不实现IEffect接口的任何API。 IEffect IEffect接口定义所有Flex效果的基本接口。 IEffectInstance IEffectInstance接口代表在目标上播放的效果实例。 IEffectTargetHost IEffectTargetHost接口定义允许您访问数据效果的基于目标list控件的接口。 类 类 说明 AddChildAction AddChildAction类定义对应于视图状态定义的AddChild属性的动作效果。 AddItemAction AddItemAction类定义确定项目渲染器何时显示在控件中的动作效果,该动作效果针对添加到基于列表的控件(如List或TileList)的项目或替换控件中现有项目的项目。 AnimateProperty AnimateProperty效果可为组件的属性或样式设置动画效果。 Blur 通过Blur效果,您可以对组件应用模糊视觉效果。 CompositeEffect CompositeEffect类是Parallel类和Sequence类的父类,这两个类定义 Parallel>和 Sequence>MXML标签。 DefaultListEffect DefaultListEffect类可定义当数据提供程序中的数据发生更改时应用于List控件的项目渲染器的默认效果。 DefaultTileListEffect DefaultTileListEffect类定义当数据提供程序中的数据发生更改时,应用于TileList控件的项目渲染器的默认效果。 Dissolve 将组件的动画效果设置为从透明到不透明,或从不透明到透明。 Effect Effect类是一个抽象基类,用于定义所有Flex效果的基本功能。 EffectInstance EffectInstance类代表在目标上播放的效果实例。 EffectManager EffectManager类侦听由Flex应用程序中的对象调度的事件,如show和move事件。 EffectTargetFilter EffectTargetFilter类定义每个效果目标上的每个过渡效果执行的自定义滤镜。 Fade 淡入淡出效果可设置组件的alpha属性的动画效果(从透明到不透明或从不透明到透明)。 Glow 通过Glow效果,您可以对组件应用视觉glow效果。 Iris Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。 MaskEffect MaskEffect类是所有设置遮罩动画的效果的抽象基类,如划出效果和Iris效果。 Move Move效果在指定的时间间隔内随时间更改组件的位置。 Parallel Parallel效果同时播放多个子效果。 Pause Pause效果在对效果进行排序时很有用。 RemoveChildAction RemoveChildAction类可定义与视图状态定义的RemoveChild属性对应的动作效果。 RemoveItemAction RemoveItemAction可定义一个动作效果,用于确定何时由于从基于列表的控件(如List或TileList)中删除了某个项目的项目渲染器,或某个项目被添加到控件中的新项目取代,其项目渲染器从控件中消失。 Resize Resize效果在指定的时间间隔更改组件的宽度或高度,或同时更改这两者。 Rotate Rotate效果可围绕指定的点旋转组件。 Sequence Sequence效果以子效果的添加顺序依次播放多个子效果。 SetPropertyAction SetPropertyAction类可定义与视图状态定义的SetProperty属性相对应的动作效果。 SetStyleAction SetStyleAction类定义对应于视图状态定义的SetStyle属性的动画效果。 SoundEffect SoundEffect类用于播放MP3音频文件。 Tween Tween类定义一个补间,此补间是于某个时段内在目标对象上执行的属性动画。 TweenEffect TweenEffect类是基于Tween对象的所有效果的superclass。 UnconstrainItemAction UnconstrainItemAction类可定义一个动作效果,在数据效果定义中将使用此效果暂时停止通过父级控件的布局算法定位项目渲染器。 WipeDown WipeDown类定义条形向下擦除效果。 WipeLeft WipeLeft类可定义条形向左擦除效果。 WipeRight WipeRight类定义条形向右擦除效果。 WipeUp WipeUp类定义线条向上划出的效果。 Zoom Zoom效果放大或缩小中心点上的对象。 mx.effects.easing 类 类 说明 Back Back类可以定义三个缓动函数,以使用Flex效果类实现运动。 Bounce Bounce类可以定义三个缓动函数,以便使用Flex效果类实现回弹运动。 Circular Circular类可以定义三个缓动函数,以使用Flex效果类实现circular运动。 Cubic Cubic类可以定义三个缓动函数,以便使用Flex效果类实现运动。 Elastic Elastc类可以定义三个缓动函数,以便使用Flex效果类实现运动,其中的运动由按指数方式衰减的正弦波来定义。 Exponential Exponential类可以定义三个缓动函数,以便使用Flex效果类实现运动,其中的运动由按指数方式衰减的正弦波来定义。 Linear Linear类可以定义缓动函数,以便使用Flex效果类实现线性运动。 Quadratic Quadratic类可以定义三个缓动函数,以使用Flex效果类实现quadratic运动。 Quartic Quartic类可以定义三个缓动函数,以使用Flex效果类实现运动。 Quintic Quintic类可以定义三个缓动函数,以便使用Flex效果类实现运动。 Sine Sine类可以定义三个缓动函数,以便使用Flex效果类实现运动,其中的运动由正弦波定义。 mx.effects.effectClasses 类 类 说明 ActionEffectInstance ActionEffectInstance类是所有操作效果实例类的superclass。 AddChildActionInstance AddChildActionInstance类用于实现AddChildAction效果的实例类。 AddItemActionInstance AddItemActionInstance类用于实现AddItemAction效果的实例类。 AnimatePropertyInstance AnimatePropertyInstance类用于实现AnimateProperty效果的实例类。 BlurInstance BlurInstance类用于实现Blur效果的实例类。 CompositeEffectInstance CompositeEffectInstance类用于实现CompositeEffect类的实例类。 DissolveInstance DissolveInstance类用于实现Dissolve效果的实例类。 FadeInstance FadeInstance类用于实现Fade效果的实例类。 GlowInstance GlowInstance类用于实现Glow效果的实例类。 IrisInstance IrisInstance类用于实现Iris效果的实例类。 MaskEffectInstance MaskEffectInstance类是一个抽象基类,用于实现MaskEffect类的实例类。 MoveInstance MoveInstance类用于实现Move效果的实例类。 ParallelInstance ParallelInstance类用于实现Parallel效果的实例类。 PauseInstance PauseInstance类用于实现Pause效果的实例类。 PropertyChanges PropertyChanges类用于为过渡的目标组件中的一组属性定义开始值和结束值。 RemoveChildActionInstance RemoveChildActionInstance类用于实现RemoveChildAction效果的实例类。 RemoveItemActionInstance RemoveItemActionInstance类用于实现RemoveChildAction效果的实例类。 ResizeInstance ResizeInstance类用于实现Resize效果的实例类。 RotateInstance RotateInstance类用于实现Rotate效果的实例类。 SequenceInstance SequenceInstance类用于实现Sequence效果的实例类。 SetPropertyActionInstance SetPropertyActionInstance类用于实现SetPropertyAction效果的实例类。 SetStyleActionInstance SetStyleActionInstance类用于实现SetStyleAction效果的实例类。 SoundEffectInstance SoundEffectInstance类用于实现SoundEffect效果的实例类。 TweenEffectInstance TweenEffectInstance类用于实现TweenEffect的实例类。 UnconstrainItemActionInstance UnconstrainItemActionInstance类用于实现UnconstrainItemAction效果的实例类。 WipeDownInstance WipeDownInstance类用于实现WipeDown效果的实例类。 WipeLeftInstance WipeLeftInstance类用于实现WipeLeft效果的实例类。 WipeRightInstance WipeRightInstance类用于实现WipeRight效果的实例类。 WipeUpInstance WipeUpInstance类用于实现WipeUp效果的实例类。 ZoomInstance ZoomInstance类用于实现Zoom效果的实例类。 1.2简单效果组件 Flex中提供了丰富的效果组件。 由于效果是一种根据时间渐变的过程,因此所 有效果都具有duration属性,用来设置播放时间(以毫秒为单位)。 也可以通过设置repeatCount属性和repeatDelay属性,来分别控制效果播放的次数和重 复播放效果的时间间隔(以毫秒为单位)。 如果希望在触发器被触发后,延迟 一段时间调用效果,可以使用startDelay属性。 1)Flex特效之AnimateProperty动画效果 AnimateProperty是用来为组件的属性或样式设置动画的效果。 我们可以通过其 property属性设定目标对象上需要设置动画效果的属性,然后设置fromValue 属性和toValue属性,为效果提供属性的起始值和结束值。 例如下面的代码使用 mouseDownEffect触发器,当单击图片时,触发AnimateProperty效果,在1 秒钟内,Image对象的scaleX属性由1变为2,被横向拉伸。 代码如下: AnimatePropertyidmx: AnimatePropertyid="animateProperty"property=" scaleX"fromValue="1"toValue="2"duration="1000"/> Imageid="img"source="assets/plane.png" mouseDownEffect="{animateProperty}"/> 如果希望通过样式设置效果,可以将isStyle属性设置为ture,然后通过 setStyle()方法设置目标对象的样式,从而达到设置效果的目的。 2)Flex特效之Blur模糊效果 Blur是一种模糊效果。 该效果使用了flash.filters.BlurFilter滤镜,如果对 某个组件应用了Blur效果,就不能再对该组件应用BlurFilter滤镜,也无法 再次应用Blur效果。 下面的代码通过Image对象的mouseDownEffect触发器触 发Blur效果,在1秒钟内,Image对象将逐渐变得模糊。 代码如下: Blurid="blurImage"duration="1000"blurXFrom="0.0"blurXTo="10.0" blurYFrom="0.0"blurYTo="10.0"/> 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效果: Dissolveid="dissolveOut"duration="1000"alphaFrom="1.0" alphaTo="0.0"/> Dissolveid="dissolveIn"duration="1000"alphaFrom="0.0" alphaTo="1.0"/> CheckBoxid="cbx"label="visible"selected="true"/> Imagesource="assets/plane.png"visible="{cbx.selected}" 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效果: Fadeid="fadeOut"duration="1000"alphaFrom="1.0"alphaTo="0.0"/> Fadeid="fadeIn"duration="1000"alphaFrom="0.0"alphaTo="1.0"/> CheckBoxid="cbx"label="visible"selected="true"/> Imagesource="assets/plane.png"visible="{cbx.selected}" hideEffect="{fadeOut}"showEffect="{fadeIn}"/> 5)Flex特效之Glow发光效果 Glow是一种发光效果,该效果使用了flash.filters.GlowFilter滤镜类。 如果 对某个组件应用了Glow效果,就不能对该组件应用GlowFilter滤镜,也无法 再次应用Glow效果。 下面的代码通过Image对象的mouseDownEffect触发器触 发Glow效果: Glowid="glowImage"duration="1000"alphaFrom="1.0"alphaTo="0.3" blurXFrom="0.0"blurXTo="50.0"blurYFrom="0.0"blurYTo="50.0"color="0x 00FF00"/> Imagesource="assets/plane.png"mouseDownEffect="{glowImage}"/> 6)Flex特效之Iris虹效果 Iris效果通过扩展或收缩集中在目标上的矩形遮罩为效果目标设置动画。 该效 果可以从目标的中心放大遮罩来显示目标,也可以向中心收缩遮罩来隐藏目标。 下面的代码使用一个CheckBox对象设置Image的visible属性,通过hideEffect 和showEffect触发器分别触发各自的Iris效果: Irisid="irisOut"duration="1000"showTarget="true"/> Irisid="irisIn"duration="1000"showTarget="false"/> Imageid="Flex"source="assets/plane.png"visible="{cbx.selected}" showEffect="{irisIn}"hideEffect="{irisOut}"/> CheckBoxid="cbx"label="visible"selected="true"/> 7)Flex特效之Move移动效果 Move效果用来实现移动动画。 在给定时间内,组件的位置会随时间变化而变化。 使用该效果通常需要用到以下几个属性。 xFrom和yFrom属性用来指定初始位置。
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Flex 特效 详解