Flex 布局变化时的动画效果解析 简单版

这个连接时Adobe官方的一个例子

http://examples.adobe.com/flex3/devnet/networkmonitor/main.html

相信大家都看过

 

而且肯定会对其中ViewStack切换时候的动画产生兴趣...

 

小弟不才，看了半天源码，只能做成这个小例子，希望大家指教

 

例子代码:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
	xmlns:mx="http://www.adobe.com/2006/mxml" 
	layout="absolute" minWidth="200" minHeight="200" 
	width="200" height="200">
	<mx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.core.UIComponent;
			import mx.effects.Move;
			/**
			 * xs1和ys1 是管理布局的简化体
			 * 如果复杂化，则叫做LayoutManager
			 */
			public var xs1:Array = new Array(10,10,10,10);
			public var ys1:Array = new Array(10,40,70,100);
			/**
			 * xs2和ys2同上
			 */
			public var xs2:Array = new Array(10,58,106,154);
			public var ys2:Array = new Array(10,10,10,10);
			/**
			 * 贴换标志，这个变量很多时候是
			 * ViewStack或者Tab等组件
			 * 中的SelectItem，不一定是Boolean型
			 */
			public var flag:Boolean = false;
			/**
			 * 形变方案
			 * 当然，如果要应用的话，需要监听
			 * 效果执行完毕事件，然后再执行后面的代码
			 * 否则会布局出错
			 */
			public function changeXY():void {
				if (flag) {
					moveTo(b1,xs2[0],ys2[0]);
					moveTo(b2,xs2[1],ys2[1]);
					moveTo(b3,xs2[2],ys2[2]);
					moveTo(b4,xs2[3],ys2[3]);
				} else {
					moveTo(b1,xs1[0],ys1[0]);
					moveTo(b2,xs1[1],ys1[1]);
					moveTo(b3,xs1[2],ys1[2]);
					moveTo(b4,xs1[3],ys1[3]);
				}
				/**切换标志*/
				flag = !flag;
			}
			/**
			 * 制作效果，这个自由发挥
			 */
			public function moveTo(object:UIComponent,targetX:int,targetY:int):void {
				if (object.x != targetX || object.y != targetY) {
					var m:Move = new Move(object);
					m.xTo = targetX;
					m.xFrom = object.x;
					m.yTo = targetY;
					m.yFrom = object.y;
					m.play();
				}
			}
		]]>
	</mx:Script>
	<mx:Button id="b1" label="A" x="10" y="10"/>
	<mx:Button id="b2" label="B" x="58" y="10"/>
	<mx:Button id="b3" label="C" x="106" y="10"/>
	<mx:Button id="b4" label="D" x="154" y="10"/>
	
	<mx:Button label="BUTTON" click="changeXY()" x="10" y="168"/>
</mx:Application>

 

 

例子的具体效果，由于小弟刚刚来到Javaeye，还不懂怎么上传Flash，并且能预览，所以只能上传附件，给大家

点评一下了.

 

其实做布局转换时的动画效果，

最主要的就是去掉Application的布局设置

变为：absolute

 

然后自己制作作为的 LayoutManager ，也就是自己管理自己的布局

（当然管理的方式，就因人而异了）

大家可以参考Adobe官方的那个例子（右键可以看源码）

 

做好自己的布局管理之后，那么就是x、y坐标的问题了，

如果你算法好，想怎么变就怎么变了...

 

小弟希望大家多多点评...有什么问题尽量指出!