flex effect

例子学习网址：http://examples.adobe.com/flex2/inproduct/sdk/explorer/explorer.html

UIComponent 是所有组件的父类，定义了组件共有的属性和方法，其中包括行为触发器：

触发器名词	对应的事件名词	事件描述
addedEffect	added	当被添加到容器中时触发
createCompleteEffect	createComplete	当组件完成绘制时触发
removedEffect	removed	当组件从容器中删除时触发
focusInEffect	focusIn	当组件获得焦点时触发
focusOutEffect	focusOut	当组件失去焦点时触发
hideEffect	hide	当组件变成不可见时触发
showEffect	show	当组件变成可见时触发
mouseDownEffect	mouseDown	当鼠标在组件上按下时触发
mouseUpEffect	mouseUp	当鼠标在组件上松开时触发
rollOutEffect	rollOut	当鼠标在组件上移开时触发
rollOverEffect	rollOver	当鼠标移到组件上时触发
moveEffect	move	当组件被移动时触发
resizeEffect	resize	当组件大小改变时触发

所有的动画效果都是Effcet 类的子类，位于 mx.Effects 包中：

Effect 名称	动画效果描述
AnimateProperty	针对组件的一个以数字计算的属性，比如长度，按给定的起始值逐渐改变属性的大小。
Blur	模糊效果。可以让组件变得模糊，核心由 BlurFilter 滤镜完成。当对组件使用了该效果，不可再使用 Blur 滤镜和其他模糊效果。
Fade	淡入淡出效果。注意：当目标对象中包括文字时，必须使用嵌入字体。
Dissolve	溶解效果，主要是在目标对象上增加覆盖层，改变覆盖层的透明度，达到让目标消失或出现的效果。和 Fade 效果相比，它可以设置覆盖层的颜色。注意：当目标对象中包括文字时，必须使用嵌入字体。
Glow	发光效果，使用了GlowFilter 滤镜。当对组件使用了该效果，不可再使用GlowFilter 滤镜和其他发光效果。
Iris	彩虹效果，组件以矩形方式，从中心放大或缩小到中心。属于遮罩效果。
Move	移动效果，移动组件的坐标，只有当组件位于支持绝对定位的容器中时才有效。
Pause	停止，什么都不改变，没有动画。一般用于复合动画效果中，用来分割前后两个动画。
Resize	尺寸调整效果，改变组件的长和宽。当改变组件的长和宽时，处于同一个容器的其他组件的大小也可能会相应改变，如果该容器使用了绝对定位则不会发生这种情况。
Rotate	旋转效果。
SoundEffect	注意：当目标对象中包括文字时，必须使用嵌入字体。
WipeLeft WipeRight WipeUp WipeDown	擦除效果，属于遮罩效果。对应不同方向。
Zoom	放缩效果，以组件为中心进行放缩。

所有动画对象都继承 Effect 对象。抽象类，定义了以下方法来控制动画的播放流程：

play(targets:Array = null, playReversedFromEnd:Boolean=false)：开始播放，targets：一组目标对象，这将覆盖原来的目标对象。playReversedFromEnd：是否逆向播放。
end()：停止播放动画
pause()：暂停动画
resume()：当暂停时，继续播放
reverse()：逆向播放动画，如果动画正在播放，则从当前位置开始逆向播放。
我们也可以使用AS来完成行为的创建：

列举一个Blur Effect例子

                                01
                            
                                <?xml version="1.0"encoding="utf-8"?>
                            
                                02
                            
                                <!-- Simple example to demonstrate the Blur effect. -->
                            
                                03
                            
                                <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
                            
                                04
                            
                                05
                            
                                <mx:Blur id="blurImage"duration="1000"
                            
                                06
                            
                                blurXFrom="0.0"blurXTo="10.0"
                            
                                07
                            
                                blurYFrom="0.0"blurYTo="10.0"/>
                            
                                08
                            
                                <mx:Blur id="unblurImage"duration="1000"
                            
                                09
                            
                                blurXFrom="10.0"blurXTo="0.0"
                            
                                10
                            
                                blurYFrom="10.0"blurYTo="0.0"/>
                            
                                11
                            
                                12
                            
                                <mx:Panel title="Blur Effect Example"width="75%"height="75%"
                            
                                13
                            
                                paddingTop="10"paddingLeft="10"paddingRight="10"paddingBottom="10">
                            
                                14
                            
                                15
                            
                                <mx:Text width="100%"color="blue"
                            
                                16
                            
                                text="Click and hold the mouse on the p_w_picpath to see blurImage effect. Release the mouse to see the unblurImage effect."/>
                            
                                17
                            
                                18
                            
                                <mx:Image id="flex"source="@Embed(source='assets/Nokia_6630.png')"
                            
                                19
                            
                                mouseDownEffect="{blurImage}"
                            
                                20
                            
                                mouseUpEffect="{unblurImage}"/>
                            
                                21
                            
                                22
                            
                                </mx:Panel>
                            
                                23
                            
                                </mx:Application>

转载于:https://blog.51cto.com/4545079/1324081

flex effect相关推荐

flex effect
Flex的行为机制使得开发者可以很方便地为应用程序添加动画效果,从而使用户界面更加丰富多彩.本章将介绍如何在Flex应用程序中创建行为及动画效果. 9.1 什么是行为 Flex中的行为(Behavi ...
Flex入门的好书——《Flex3 Cookbook 中文版》
本文标题:Flex入门的好书--<Flex3 Cookbook 中文版> 本文链接:http://zengrong.net/post/659.htm Flex3 Cookbook 中文 ...
积少成多 Flash(ActionScript 3.0 Flex 3.0) 系列文章索引
[源码下载] 积少成多 Flash(ActionScript 3.0 & Flex 3.0) 系列文章索引作者:webabcd Flash 之 ActionScript 3.0 1.积少成 ...
了解一下Flex 4里的fx、mx以及s命名空间
2019独角兽企业重金招聘Python工程师标准>>> Flex 4带给我们的,是全新的命名空间.了解这些命名空间必定是一件好事情.Flex 4有三个非常重要的命名空间,分别是: x ...
Flex 元数据标签使用
Flex 元数据标签1.[ArrayElementType] 使用ArrayElementType元数据标签可以让你定义数组元素的数据类型.程序代码:[ArrayElementType("S ...
Flex 3 与 Flex 4 beta 之间的区别
Flex 3 与 Flex 4 beta 之间的区别 Flex 4(代码名:Gumbo)beta 发行版在 Flex 3 基础上做出重大改动.Flex 4 beta 引入了一个新的组件和外观架构.但是 ...
Flex组件的行为和动画效果（实例）
触发器名称对应事件名称事件描述 addedEffect added ...
Flex 3 metadata tags 标签
Flex 3 metadata tags Flex引入了元数据标签的概念,它告诉编译器如何编译这段Flex 或actionscript代码.大多数人都使用过[Bindable]标签,元数据标签是一种 ...
css flexbox模型_Flexbox-Ultimate CSS Flex速查表（带有动画图！）
css flexbox模型 This comprehensive CSS flexbox cheatsheet will cover everything you need to know to st ...

flex effect

flex effect相关推荐

最新文章

热门文章