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 使用行為對象和動畫效果_ 放縮\調整大小效果