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>  

你可能感兴趣的:(xml,css,Flex,Adobe)