Flex学习笔记_06 使用行为对象和动画效果_ 放缩

6.3.2 放缩效果和调整大小效果
Zoom 放缩效果 对对象进行放大或者缩小操作，是通过改变对象的水平比例scaleX 和垂直比例scaleY 来实现的。

Xml代码

1. <? xml   version = "1.0"   encoding = "utf-8" ?>   
2. < mx:Application   xmlns:mx = "http://www.adobe.com/2006/mxml"   layout = "absolute" >   
3.      < mx:Style   source = "style.css"   />   
4.      < mx:Script >   
5.          <![CDATA[  
6.             import mx.effects.Zoom;  
7.              
8.             internal function zoomCanvas():void{  
9.                 var newZoom:Zoom = new Zoom();  
10.                 newZoom.zoomHeightFrom =0.01;  
11.                 newZoom.zoomWidthFrom = 0.01;  
12.                 newZoom.originX = 0;  
13.                 newZoom.originY = 0;  
14.                 newZoom.target = Canvas_1;  
15.                 newZoom.duration = 2000;  
16.                 newZoom.play();  
17.             }  
18.         ]]>   
19.      </ mx:Script >   
20.       
21.      < mx:Canvas   id = "Canvas_1"   styleName = "box"   x = "48"   y = "40"   width = "200"   height = "200"   >   
22.          < mx:Text   x = "15"   y = "37"   text = "文本，请注意放大过程中文本的变化"   width = "166"   height = "82" />   
23.      </ mx:Canvas >   
24.      < mx:Button   x = "48"   y = "277"   label = "放大"   click = "zoomCanvas()" />   
25. </ mx:Application >   

    <?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
    <mx:Style source="style.css" />
    <mx:Script>
        <![CDATA[
            import mx.effects.Zoom;
           
            internal function zoomCanvas():void{
                var newZoom:Zoom = new Zoom();
                newZoom.zoomHeightFrom =0.01;
                newZoom.zoomWidthFrom = 0.01;
                newZoom.originX = 0;
                newZoom.originY = 0;
                newZoom.target = Canvas_1;
                newZoom.duration = 2000;
                newZoom.play();
            }
        ]]>
    </mx:Script>
   
    <mx:Canvas id="Canvas_1" styleName="box" x="48" y="40" width="200" height="200" >
        <mx:Text x="15" y="37" text="文本，请注意放大过程中文本的变化" width="166" height="82"/>
    </mx:Canvas>
    <mx:Button x="48" y="277" label="放大" click="zoomCanvas()"/>
</mx:Application>
  

始末位置的长宽比例 ：zoomWidthFrom、zoomWidthTo、zoomHeightFrom、zoomHeightTo 。取0-1的值。默认1
动画的参照点坐标：originX 、originY。 默认以组件的中心点。
captureRollEvents：是否忽略动画过程中的鼠标移上和移出动作。

Resize 调整大小 效果和 Zoom 相比，似乎相同，其实两者区别很大。Resize 是重新确定对象的长宽属性。会影响子元素。

始末位置的长宽：widthFrom、widthTo、heightFrom、heightTo
长宽的增量： widthBy、heightBy
如果指定了widthTo 则会忽略widthBy。没有指定widthBy，则默认为当前的宽度。

hideChildreTargets：针对Panel组件，用来隐藏Panel组件的子级元素，同时临时关闭Panel组件的自动调整功能，直到动画结束后再重新恢复。这样可以提搞性能。

Xml代码

1. <? xml   version = "1.0"   encoding = "utf-8" ?>   
2. < mx:Application   xmlns:mx = "http://www.adobe.com/2006/mxml"   layout = "absolute" >   
3.      < mx:Style   source = "style.css"   />   
4.      < mx:Script >   
5.          <![CDATA[  
6.             import mx.effects.Resize;  
7.             import mx.events.TweenEvent;  
8.             //鼠标动作  
9.             internal function resizeCanvas():void{  
10.                 //创建新的Resize对象  
11.                 var newResize:Resize = new Resize();  
12.                 //设定高度和宽度的起始值  
13.                 newResize.heightFrom = 200;  
14.                 newResize.widthFrom = 200;  
15.                 //高度的最终值  
16.                 newResize.heightTo = 240;  
17.                 //宽度增加40相当于 widthTo = 240  
18.                 newResize.widthBy = 40;  
19.                 //指定要隐藏内部元素的Panel  
20.                 newResize.hideChildrenTargets = [Panel_1,Panel_2];  
21.                 newResize.target = Canvas_1;  
22.                 newResize.duration = 2000;     
23.                 //监听动画的结束事件             
24.                 newResize.addEventListener(TweenEvent.TWEEN_END,EndHandler);                 
25.                 Canvas_1.autoLayout = false;  //注释掉这一句代码然后运行程序，观察差别  
26.                 newResize.play();  
27.             }  
28.             internal function EndHandler(evt:TweenEvent):void{  
29.                 Canvas_1.autoLayout = true;  
30.             }  
31.         ]]>   
32.      </ mx:Script >   
33.       
34.      < mx:Canvas   id = "Canvas_1"   styleName = "box"   x = "26"   y = "40"   width = "200"   height = "200"   >   
35.          < mx:Text   x = "10"   y = "10"   text = "说明：调整大小效果"   width = "166"   height = "26" />   
36.          < mx:Panel   id = "Panel_1"   styleName = "imgPanel"   x = "10"   y = "33"   width = "80%"   height = "80%"   layout = "absolute"   title = "面板一" >   
37.              < mx:Image   x = "0"   y = "0"   source = "tree.jpg" />   
38.          </ mx:Panel >   
39.      </ mx:Canvas >   
40.      < mx:Button   x = "26"   y = "293"   label = "放大"   click = "resizeCanvas()" />   
41.      < mx:Panel   id = "Panel_2"   styleName = "imgPanel"   x = "279"   y = "40"   width = "134"   height = "129"   layout = "absolute"   title = "面板二" >   
42.          < mx:Image   x = "0"   y = "0"   source = "tree.jpg" />   
43.      </ mx:Panel >   
44. </ mx:Application >   

Flex学习笔记_06 使用行为对象和动画效果_ 放缩\调整大小效果