论坛首页 → 编程语言技术论坛 →

Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件

浏览 3944 次
锁定老帖子 主题：Flex学习笔记_06 使用行为对象和动画效果_认识行为对象、行为和组件
精华帖 (0) :: 良好帖 (0) :: 新手帖 (0) :: 隐藏帖 (0)
作者 正文
  • enboga
  • 等级: 三星会员
  • 性别:
  • 文章: 65
  • 积分: 340
  • 来自: 厦门
   发表时间：2008-08-17  

6.1 认识行为对象

6.1.1 什么是行为对象

行为对象可以看作是触发器(Trigger) 和动画效果(Effect) 的结合体。
触发器和事件并不相同，针对一个事件的触发器，受到事件的制约。事件可以被监听，而触发器不可以。
组件定义了多种触发器，成为本身的一个属性，这些触发器默认没有设置动画效果。
行为对象允许对一个触发器定义多个动画效果，当触发器被激活，这些动画会按某种顺序运行。

6.1.2 创建行为

Move 标签：将target 指定的作用目标 img图片 从xFrom 移动到 xTo 位置，duration 表示持续的时间（单位：毫秒）。
<mx:Move id="myMove" target="{img}" xFrom="50" xTo="150" duration="2000"/>
<mx:Image id="img" x="53" y="53" source="tree.jpg"/>
<mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
 

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

  • play(targets:Array = null, playReversedFromEnd:Boolean=false)：开始播放，targets：一组目标对象，这将覆盖原来的目标对象。playReversedFromEnd：是否逆向播放。
  • end()：停止播放动画
  • pause()：暂停动画
  • resume()：当暂停时，继续播放
  • reverse()：逆向播放动画，如果动画正在播放，则从当前位置开始逆向播放。

我们也可以使用AS来完成行为的创建：
<mx:Script>
        <![CDATA[
            import mx.effects.Move;
   
            private var myMove:Move;           
            internal function initApp():void{
                myMove = new Move();
                myMove.xFrom = 50;
                myMove.xTo = 150;
                myMove.duration = 2000;
                myMove.target = img
            }
        ]]>
    </mx:Script>
   
    <mx:Image id="img" x="53" y="53" source="tree.jpg"/>
    <mx:Button x="50" y="170" label="移动图片" click="myMove.play()"/>
 


6.2 行为和组件

6.2.1 组件的行为和动画效果

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
 放缩效果，以组件为中心进行放缩。


6.2.2 为组件添加行为--监听动画的执行

<mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
effectStart 和 effectEnd 是动画效果共有的事件，分别在动画的开始和结束时被激发。

<mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
repeatCount 和 repeatDelay 也是共有属性，分别表示动画播放的次数和每次都间隔时间

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
     creationComplete="initApp()">   
    <mx:Style source="style.css" />   
    <mx:Script>
        <![CDATA[           
            internal function effectStartHandler():void{
                tip_txt.text = "提示信息：动画开始了";
            }
            internal function effectEndHandler():void{
                tip_txt.text = "提示信息：动画结束了";
            }
        ]]>
    </mx:Script>
    <mx:ApplicationControlBar dock="true">
        <mx:Label id="tip_txt" text="提示信息：" width="219" styleName="label"/>
    </mx:ApplicationControlBar>
   
    <mx:Iris id= "myIris" effectStart="effectStartHandler()" effectEnd="effectEndHandler()" />
    <mx:WipeLeft id= "myWipe" />
    <mx:WipeRight id= "myWipe2" repeatCount="2" repeatDelay="500"/>
   
    <mx:Image id="image" x="35" y="43" source="tree.jpg" showEffect="myIris" hideEffect="myIris"/>
    <mx:Image id="image2" x="170" y="43" source="tree.jpg" showEffect="myWipe" hideEffect="myWipe2"/>
    <mx:Button label="改变图片"  x="37" y="153" click="image.visible = image2.visible= !image.visible"/>
   
</mx:Application>
 


可以通过CSS样式来设定组件的行为：

<mx:Style>
        .image{
            showEffect:    myIris;
            hideEffect:    myIris;
        }
        .image2{
            showEffect:    myWipe2;
            hideEffect:    myWipe;
        }
    </mx:Style>

<mx:Image id="image" x="35" y="43" source="tree.jpg" styleName="image"/>
<mx:Image id="image2" x="170" y="43" source="tree.jpg" styleName="image2"/>
 


或者通过setStyle 来设置样式：

<mx:Script>
        <![CDATA[
             internal function initApp():void{
                image.setStyle("showEffect",myIris);
                image.setStyle("hideEffect",myIris);
                image2.setStyle("showEffect",myWipe2);
                image2.setStyle("hideEffect",myWipe);
            }
        ]]>
</mx:Script>

<mx:Image id="image" x="35" y="43" source="tree.jpg“/>
<mx:Image id="image2" x="170" y="43" source="tree.jpg"/>
 

 
返回顶楼
         
论坛首页 → 编程语言技术版

跳转论坛:
Global site tag (gtag.js) - Google Analytics