Flex學習筆記_06 使用行爲對象和動畫效果_ 放縮\調整大小效果

6.3.2 放縮效果和調整大小效果
Zoom 放縮效果 對對象進行放大或者縮小操作，是通過改變對象的水平比例scaleX 和垂直比例scaleY 來實現的。

 

<?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 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.Resize;
            import mx.events.TweenEvent;
            //鼠標動作
            internal function resizeCanvas():void{
                //創建新的Resize對象
                var newResize:Resize = new Resize();
                //設定高度和寬度的起始值
                newResize.heightFrom = 200;
                newResize.widthFrom = 200;
                //高度的最終值
                newResize.heightTo = 240;
                //寬度增加40相當於 widthTo = 240
                newResize.widthBy = 40;
                //指定要隱藏內部元素的Panel
                newResize.hideChildrenTargets = [Panel_1,Panel_2];
                newResize.target = Canvas_1;
                newResize.duration = 2000;   
                //監聽動畫的結束事件           
                newResize.addEventListener(TweenEvent.TWEEN_END,EndHandler);               
                Canvas_1.autoLayout = false;  //註釋掉這一句代碼然後運行程序，觀察差別
                newResize.play();
            }
            internal function EndHandler(evt:TweenEvent):void{
                Canvas_1.autoLayout = true;
            }
        ]]>
    </mx:Script>
   
    <mx:Canvas id="Canvas_1" styleName="box" x="26" y="40" width="200" height="200" >
        <mx:Text x="10" y="10" text="說明：調整大小效果" width="166" height="26"/>
        <mx:Panel id="Panel_1" styleName="imgPanel" x="10" y="33" width="80%" height="80%" layout="absolute" title="面板一">
            <mx:Image x="0" y="0" source="tree.jpg"/>
        </mx:Panel>
    </mx:Canvas>
    <mx:Button x="26" y="293" label="放大" click="resizeCanvas()"/>
    <mx:Panel id="Panel_2" styleName="imgPanel" x="279" y="40" width="134" height="129" layout="absolute" title="面板二">
        <mx:Image x="0" y="0" source="tree.jpg"/>
    </mx:Panel>
</mx:Application>