如何在Flex应用程序中创建行为及动画效果No.3

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

<?xml version="1.0"?>

   <mx:Applicationxmlns:mx="http://www.adobe.com/2006/mxml"paddingLeft=

   "0"

layout="absolute" mouseDown="moveImage();">

    <mx:Script>

        <![CDATA[

          //当按下鼠标时调用该事件

            private function moveImage():void {

               //停止播放Move效果

moveEffect.end();

//设置目标位置

moveEffect.xTo=mouseX;

moveEffect.yTo=mouseY;

//播放Move效果

moveEffect.play();

}

     ]]>

    </mx:Script>

<mx:Move id="moveEffect" target="{img}"/>

<mx:Image id="img" source="assets/plane.png"/>

</mx:Application>

代码中将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效果的使用方法：

<mx:Resize id="expand" target="{img}" widthTo="100" heightTo="160"/>

<mx:Resize id="contract" target="{img}" widthTo="25" heightTo="40"/>

<mx:ControlBar>

    <mx:Button label="Expand" click="expand.end(); expand.play();"/>

<mx:Buttonlabel="Contract"click="contract.end();contract.play();"/>

</mx:ControlBar>

<mx:Image id="img" width="25" height="40" source="assets/icon01.png"/>

另外hideChildrenTargets属性用来隐藏Panel容器的其他子项，当我们对Panel容器中的子项应用Resize效果时，默认情况下Panel会反复计算子项的大小和位置以调整布局，如果将这个属性设为true，可以让Panel容器在播放动画时不做这种计算，直到播放完成，这样可以节约系统资源。

10）Rotate旋转效果

Rotate是一种旋转效果，使组件围绕指定的点旋转。Rotate可以指定旋转中心的坐标（originX和originY属性）及旋转的起始角度（angleFrom属性）和最终角度（angleTo属性）。起始旋转角度的有效值范围是0～360，而最终角度则可以是正值也可以是负值，默认值为360。如果angleTo的值比angleFrom的值小，则目标沿逆时针方向旋转，否则以顺时针方向旋转。代码如下：

<mx:Rotate id="rotate" angleFrom="-45" angleTo="0" target="{img}"

duration="2000"/>

<mx:Image id="img" source="assets/plane.png" addedEffect="rotate"/>

另外有时需要设置hideFocusRing属性，以确定在开始播放效果时，效果是否应隐藏对焦环。该属性默认值为true。对于组件而言，对焦环已经被自动隐藏。如果Rotate效果应用于那些不是以UIComponent为基类目标对象，就必须隐藏对焦环。

需要注意的是， hideFocusRing属性在以Effect为基类的效果类中，默认值为false，而在以MaskEffect为基类效果类中，默认值为true。