Flex學習筆記_06 使用行為對象和動畫效果_ 放縮
系統
2016 0
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
>
??
<?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
>
??
Flex學習筆記_06 使用行為對象和動畫效果_ 放縮\調整大小效果
更多文章、技術交流、商務合作、聯系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元