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

13）Zoom缩放效果

Zoom效果可以以指定点为中心按比例缩放对象。与Resize效果不同的是，Resize改变目标对象的长宽属性，而Zoom改变的目标对象的缩放比例。在下面的例子中，当鼠标移动到图片上时开始播放Zoom效果，鼠标移出时还原。

代码清单 ZoomSample.mxml

<?xml version="1.0" encoding="utf-8"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<mx:Script>

      <![CDATA[       

          import flash.events.MouseEvent;       

          //鼠标事件处理函数

          public function doZoom(event:MouseEvent):void {

               //如果已经在播放效果了, 则反向播放效果

               if (zoom.isPlaying) {

                   zoom.reverse();

               }

               //否则播放效果

else {

zoom.play([event.target],event.type==MouseEvent.ROLL_OUT?true:false);

               }

          }

      ]]>   

</mx:Script>

<mx:Zoom id="zoom" originX="{0}" originY="{0}"

    zoomWidthTo="2"zoomHeightTo="2"zoomWidthFrom=".5"zoomHeightFrom=".5

    "/>   

<mx:Paneltitle="ZoomEffect"width="90%"height="90%"layout="absolute"

paddingTop="5"paddingLeft="10"paddingRight="10"paddingBottom="5">       

    <mx:Imageid="img"x="100"y="100"source="@Embed(source='assets/car.pn

    g')"

    scaleX=".5"scaleY=".5"rollOver="doZoom(event)"rollOut="doZoom(event

    )"/>

</mx:Panel>

</mx:Application>

9.1.3  复合效果组件

很多时候需要同时执行或按顺序执行多个动画效果，此时可以用Parallel和Sequence效果。

1）Parallel平行播放效果

Parallel效果可以同时播放多个子效果，下面例子中的Parallel效果包含了Move和Resize效果，单击“Expend”按钮时图片将放大并发生位移，单击“Contract”按钮则返回原位置，并逐渐缩小为初始大小。

代码清单 ParallelSample.mxml

<?xml version="1.0"?>

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

<!--在Parallel效果中包含Move和Resize效果-->

<mx:Parallel id="expand" target="{img}">

      <mx:Move xTo="{canvas.width/2 - 50}" yTo="{canvas.height/2-

100}"/>

      <mx:Resize widthTo="100" heightTo="200"/>

</mx:Parallel>

<mx:Parallel id="contract" target="{img}">

      <mx:Move xTo="20" yTo="20"/>

      <mx:Resize widthTo="30" heightTo="60"/>

</mx:Parallel>

<mx:Panel title="Parallel Effect" width="500" height="300">

      <mx:Canvas id="canvas" width="100%" height="100%">

          <mx:Image id="img" x="20" y="20" width="30" height="60"

               source="@Embed(source='assets/icon1.png')"/>

      </mx:Canvas>

      <!--使用ControlBar中的按钮控制效果播放-->

      <mx:ControlBar>

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

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

      </mx:ControlBar>

</mx:Panel>   

</mx:Application>

这个例子中同时使用了Move和Resize效果，如图9-3所示。

图9-3  Parallel效果

2）Sequence顺序播放效果

Sequence效果中可以顺序添加多个子效果，并以子效果的添加顺序依次播放。下面的代码演示了Sequence效果的使用方式：

<mx:Sequence id="sequenceEffect">

<mx:Move xBy="150" duration="1000"/>

<mx:Pause duration="2000"/>

<mx:Move xBy="-150" duration="1000"/>

</mx:Sequence>

  <mx:Canvaswidth="100%"height="100%"mouseDownEffect="{sequenceEffect}

  ">

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

</mx:Canvas>

在这个例子里，当用户在Canvas中按下鼠标时，会依次调用Sequence中的各个子效果，首先Image对象会右移一段距离，然后暂停2秒，再左移回到原来位置。