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

最新推荐文章于 2024-05-03 21:04:02 发布

zhp5000

最新推荐文章于 2024-05-03 21:04:02 发布

阅读量154

点赞数

分类专栏： Flex 文章标签： Flex CSS Adobe XML

本文链接：https://blog.csdn.net/zhp5000/article/details/83469219

版权

Flex 专栏收录该内容

33 篇文章 0 订阅

订阅专栏

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

Xml代码

<?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代码

<?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>