`
zhangb310
  • 浏览: 63845 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

Flex 动画效果

    博客分类:
  • flex
阅读更多
在Flex里面不像在Flash里面随意制作动画了,Flex更趋向于应用程序,而不是动画制作了,所以没有了时间轴的概念。在Flex中使用动画效果,可以用Flex自带的Effect,或者自已定制Effect,因为很多人都想借Flash里面的一样操作Flex,比如在Flash里面做一个动态按钮很容易,当鼠标移动到上面时,会有很多发光的点跑出来(荧火虫效果),这种效果在Flash十分容易实现,但在Flex里面要实现这种效果就不是那么简单的了,下面说说在Flex里的的动务效果的使用与自定义制作。

首先介绍一下Flex里面的自带的效果有以下几种:
   Blur                             模糊效果
   Move                           移动效果
   Fade                           淡入淡出效果           
   Glow                           发光效果
   Resize                       调整大小效果
   Rotate                       旋转效果
   Zoom                         缩放效果
   WipeLeft                     用遮罩实现画面收放效果,下同,分别为不同方向
   WipeRight
   WipeUp
   WipeDown

不同的效果所需要设置的属性也不一样,比如Blur效果需要设置它的X与Y轴的模糊像素
<mx:Blur id="blur" blurXFrom="0" blurXTo="10" />
而Move效果需要设置移动的位置信息
<mx:Move id="moveEffect" xFrom="-100" />
其它设置可以参考Flex语言参考

下面说说如何使用这些效果。要运行这些效果有两种方法:一种是调用该效果的play()方法,另外一种是使用触发器来触发效果。
(1)使用play()方法:

以下代码:
程序代码 程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
         <![CDATA[
             private function onClick(event:Event):void {
                 be.target = event.currentTarget;
                 be.play( );
             }
         ]]>
     </mx:Script>
   
     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="1000" />

     <mx:Panel id="p" width="200" height="180" click="onClick(event)" />
</mx:Application>



在代码中看到,要使用效果,先定好一个效果,如上面的<mx:Blur ...>该标签就是模糊效果的MXML标签,定好效果后在Panel的点击事件里再对该效果进行一些设置,如be.target = event.currentTarget 设置该效果将要应用到的目标组件(Component),之后再调用play()方法后,该效果就会应用在Panel上面播放!

(2)使用触发器播放效果:
使用触发器播放效果的话,可以不用写ActionScript代码,直接在组件的效果触发器上指明使用哪个效果就可以了,比较简单明了,但就不能进行更多的属性定制,而用AS控制播放的话,可以对效果进行很多的设置再相应根据情况播放,先看看触发器播放的代码:
程序代码 程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />

     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" />
</mx:Application>



看以上代码,先写好了Blur的效果并设置好属性后,duration="2000"这个是播放的时间以毫秒为单位。
在Panel标签里有这样一句:creationCompleteEffect="{be}" 这个就是触发器,是该Panel组件的效果触发器,当Panel组件加载完成时,会由系统自动调用该效果触发器,触发器里面指了触发 be 这个Blur效果
在Flex里面还有很多触发器如:
   addedEffect                                       被添加进容器时触发效果
   removedEffect                                   被从容器中移除时触发效果
   creationCompleteEffect                     被创建成功时触发效果
   focusInEffect                                     获得焦点时触发
   focusOutEffect                                   失去焦点时触发
   hideEffect                                           被隐藏时(visible=false)触发
   showEffect                                         被显示时(visible=true)触发
   rollOverEffect                                     鼠标经过时触发
   rollOutEffect                                       鼠标离开时触发
   mouseDownEffect                               鼠标按下时触发
   mouseUpEffect                                   鼠标松开时触发
   moveEffect                                         被移动时触发
   resizeEffect                                       被重整大小时触发

注意:这些都是效果触发器,不要与事件触发器混乱了。事件触发器是rollOver,事件触发器与效果触发器差不多,事件触发器是当用户执行相就操作时触发事件,将会调用自定的事件触发处理函数,而效果触发器是执行相应操作时被触发并由系统自动调用所定的效果的play()方法。

现在说说效果的一些其它属性:
每个效果都有reverse( );方法,该方法是反向播放,原本由小到大的变化,而调用reverse( );后再运行play()的话,效果将会从大到小进行播放。
但要注意的一点是,reverse( );不会自动播放,即是单单调用reverse( );的话,效果并不会播放,他只会记录该效果为倒转,而要再调用play()后倒转效果才会开始播放。而调用pause( )与resume( )就是暂停与继续播放效果

startDelay这个属性是设置效果的播放延时,以毫秒为单位,即要等待多少毫秒后效果才开始播放,如:
<mx:Blur id="be" blurXTo="50" startDelay="3000" />
该模糊效果将会在调用play()之后3秒才开始播放

repeatCount这个属性是设置效果的重复次数,默认为1,设置为0的话就是不停循环播放
<mx:Blur id="be" blurXTo="50" startDelay="3000" repeatCount="5" />

每个效果都有两个事件:effectStart 与 effectEnd
你可以在该效果事件的处理函数里面对效果作相应的操作,如:
程序代码 程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
     <mx:Script>
         <![CDATA[
             import mx.events.EffectEvent;
             public function onEffEnd(e:EffectEvent):void{
                 e.effectInstance.reverse();
                 e.effectInstance.play();
             }
         ]]>
     </mx:Script>
     <mx:Blur id="be" blurXTo="50" blurYTo="50" duration="2000" />

     <mx:Panel id="p" width="200" height="180" creationCompleteEffect="{be}" effectEnd="onEffEnd(event)" />
</mx:Application>


当效果播放完时,系统将会自动触发effectEnd事件,在处理函数里面,将该效果Instance即现时播放的效果实例进行倒转并播放,当播放完,又会触发effectEnd事伯,这样一直循环!

现在再来说说效果的组合:
通常如果你觉得只应用一个效果很单调的话,可以进行效果组合应用,即多个效果同时播放或者顺序播放,
如,当加载页面时,你想Panel先模糊到一定程度,再将Panel移动到某个位置,再把Panel还原成原来的清淅度(即消退模糊)。这样分析一下,一共用了三个效果,一,先应用Blur(由清至模)效果,当Blur完成时,再应用Move效果,当Move完成时,再应用另外一个Blur(由模至清)效果。这样三个效果组合就是按顺序组合,先后运行。先来看看效果:

再来看看代码:
程序代码 程序代码

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
   
     <mx:Sequence id="sequenceEffect">
         <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
         <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
         <mx:Blur id="beIn" blurXFrom="50" blurYFrom="50" blurXTo="0" blurYTo="0" duration="500" />
     </mx:Sequence>
   
     <mx:Panel id="p" width="200" height="180" mouseDownEffect="sequenceEffect"   />
</mx:Application>


看以上代码,<mx:Sequence id="sequenceEffect">标签就是顺序组合效果标签,当应用sequenceEffect效果的时候,它会按顺序播放该标签里面的三个子效果。

另外的就是同时播放了,
程序代码 程序代码

<mx:Parallel id="parallelEffect">
           <mx:Blur id="beOut" blurXTo="50" blurYTo="50" duration="500" />
       <mx:Move id="mv" xTo="200" yTo="150" duration="500" />
</mx:Parallel>


这个标签就是同时播放的效果标签,放在它里面的子效果都会同时播放,即一边模糊一边移动。这个都可以自由组合,<mx:Parallel> 与<mx:Sequence>标签都可以自由组合,例如先按顺序先播放模糊,再同时播放移动与隐藏等。这里就不多说了。

使用Flex自带的效果基本用法就这些。
分享到:
评论

相关推荐

    Flex动画效果教程

    Flex动画效果教程主要聚焦于如何在Flex开发环境中创建引人入胜的动态视觉体验。Flex是一种基于ActionScript和MXML的开源框架,主要用于构建富互联网应用程序(RIA)。它提供了丰富的图形库和强大的动画功能,使得...

    flex动画效果与变幻.pdf

    #### 三、Flex动画效果的使用 在Flex中使用动画效果有两种主要的方式:一是通过调用特定效果对象的`play()`方法;二是利用触发器来自动播放动画效果。下面分别介绍这两种方式: ##### 3.1 使用`play()`方法播放...

    flex中动画效果

    在 Flex 3.0 中,动画效果是增强用户体验的关键特性之一,允许开发者通过编程方式实现多种视觉变换,使得用户界面更加生动和吸引人。 在 Flex 中,动画效果主要通过 `Effect` 类来实现,它们可以应用于组件或容器,...

    flex动画效果,有代码

    #### 一、Flex动画概述 Flex是一种用于开发RIA(Rich Internet Applications)的应用框架,它能够创建高性能且具有丰富交互性的Web应用程序。其中,Flex的动画功能是一个重要的特性,能够让开发者轻松地为应用程序...

    Flex 布局变化时的动画效果解析 简单版

    这篇博客“Flex布局变化时的动画效果解析 简单版”可能是作者对如何在Flex布局中实现动态变换的一种简明介绍。 首先,我们需要理解Flex布局的基础概念。在Flex布局中,容器被设置为`display: flex`,它的子元素称为...

    精通Flex 3.0——基于ActionScript 3.0实现_源代码

    10.7.1 Flex动画效果结构 235 10.7.2 组件的动画属性 236 10.7.3 动画效果类 236 10.8 几个常见动画效果的实现 237 10.8.1 设定组件大小改变的动画效果 237 10.8.2 设定alpha值组件透明度改变的动画效果...

    Flex 预加载动画demo

    1. **动画组件**:在Flex中,我们可以使用Animate类或者Timeline类来创建动画效果。这些类允许我们控制帧率、添加关键帧、改变属性等,以实现动态的加载指示器。 2. **事件监听**:预加载器需要监听应用程序加载的...

    FLEX4动画特效

    标题“FLEX4动画特效”暗示了这个压缩包包含了一系列Flex4动画效果的示例代码。这些示例可能是由FlexBuilder4.6,一个专门用于Flex开发的集成开发环境(IDE),直接导出的工程。用户可以将这些工程导入到自己的开发...

    flex翻书效果 flex翻书效果

    3. 动画执行:使用`requestAnimationFrame`创建平滑的动画效果,每次帧更新时改变`transform`属性。 4. 状态管理:跟踪当前页面状态,确保翻页过程的正确性。 五、优化与兼容性 1. 使用autoprefixer自动添加浏览器...

    超酷Flex动画图表

    总的来说,这个"超酷Flex动画图表"项目不仅提供了丰富的示例,还为你提供了一个强大的工具箱,帮助你创建引人入胜的、具有高度交互性的数据可视化应用。无论是进行数据分析、业务报告,还是进行数据故事讲述,这些...

    flex特殊效果实例

    这个版本还增强了数据绑定和动画功能,使得创建动态效果更加容易。 4. **SWC文件**:SWC是Flex的库文件格式,包含预编译的ActionScript类和资源。如果在项目中缺少某些库,可以从提供的SWC文件中找到并导入,以确保...

    不错的flex杂志效果

    Flex杂志效果是一种基于Adobe Flex技术实现的数字出版物模拟翻页效果,常见...尽管现在有更多现代化的前端框架如React和Vue.js,但Flex在某些特定场景下,特别是对于需要丰富动画效果的RIA应用,依然具有其独特的价值。

    flex3d效果展示

    在文件名“Flex3d动画引擎_效果展示”中,我们可以推断出这是一个关于Flex3D动画引擎的示例或教程,可能包含了如何创建和控制3D动画的详细步骤,以及如何实现特定效果的代码片段。学习这样的资源,开发者可以更好地...

    flex 做的控件翻转动画效果

    在本文中,我们将深入探讨如何使用Adobe Flex技术创建控件翻转动画效果。Flex是一种基于MXML和ActionScript的开源框架,主要用于构建富互联网应用程序(RIA)。它允许开发者设计、构建和部署具有交互性和动态视觉...

    Flex 3D切换效果

    总的来说,"Flex 3D切换效果"是通过巧妙地运用ActionScript 3.0的3D特性、变换和动画机制来实现的。掌握这些技术,不仅能够提升Flex应用的用户体验,也有助于开发出更具创新性和吸引力的用户界面。在实际项目中,...

    Flex2的几个行为动画源码

    9. **ZoomExample**: 这个例子可能涉及到缩放功能,可能是对图像或组件进行放大和缩小的动画效果。Flex2提供了ScaleTransform类来实现这个功能。 10. **SequenceExample**: 与ParallelExample相反,序列行为...

    flex 苹果桌面效果的弹出窗口

    4. 动画效果:利用Flex的动画库(如Tween类)实现窗口打开、关闭的平滑过渡。 5. 响应式设计:确保弹出窗口在不同尺寸的屏幕和设备上都能良好显示。 6. 开发工具:熟悉Flex Builder或Flash Builder的使用,进行代码...

    Flex 翻页效果实例

    3. **动画效果**:Flex提供了强大的动画库,如TweenLite或TweenMax,可以用来平滑地改变组件的属性,如位置、角度和透明度。在这个实例中,这些动画将用于创建流畅的翻页效果,包括页面的旋转、滑动和淡入淡出。 4....

Global site tag (gtag.js) - Google Analytics