TweenLite的又一应用：图片的拼图加载效果

晚上在逛天地会时，看到一个关于TweenLite的示例，觉得蛮实用的，整理了一下偷过来：）

注：播放完后，鼠标猛击胸部即可重放:)

思路点评：刚开始看到这个效果时，觉得应该蛮复杂的，后来看了代码之后，发现居然如此简单! 关键：先加载一张完整的图片，然后利用BitmapData的copyPixels功能，把每个小块的像素copy出来，形成一系列新的BitmapData(也就是一块块小图片)，然后再利用TweenLite让其依次(延时)移动即可。

代码：

package 
{

	import flash.display.Sprite;
	import flash.display.BitmapData;
	import flash.geom.Rectangle;
	import flash.display.Bitmap;
	import flash.geom.Point;
	import flash.events.MouseEvent;

	import gs.TweenLite;
	import gs.easing.Back;

	public class ImageUp extends Sprite
	{
		var _originalImageData:BitmapData;
		var _cols:uint = 5;
		var _rows:uint = 5;
		var _imgArr:Array = new Array();
		var _w:Number = 0;
		var _h:Number = 0;
		var _flag:Boolean = false;

		public function ImageUp()
		{
			init();
		}


		private function init():void
		{
			_originalImageData = new MiMi();//MiMi是库中导入的一张图片

			//计算每个小块的宽度、高度
			_w = _originalImageData.width / _cols;
			_h = _originalImageData.height / _rows;

			var i:uint = 0,j:uint = 0;
			for (i=0; i<_rows; i++)
			{
				for (j=0; j<_cols; j++)
				{
					var _imgCell:BitmapData = new BitmapData(_w,_h);

					//关键：从原图中复制相应的小区域像素到imgCell中
					_imgCell.copyPixels(_originalImageData,
					new Rectangle(j*_w,i*_h,_w,_h),
					new Point());
					var _sprite:Sprite = new Sprite();
					_sprite.addChild(new Bitmap(_imgCell));

					//定位
					_sprite.x = j * _w;
					_sprite.y = i * _h;

					this.addChild(_sprite);
					_imgArr.push(_sprite);
				}
			}

			this.stage.addEventListener(MouseEvent.CLICK,mouseClick);

			begin();
		}


		private function mouseClick(e:MouseEvent)
		{
			begin();
			
		}

		private function begin():void
		{
			for (var i:uint=0,j=_imgArr.length; i<j; i++)
			{
				TweenLite.from(_imgArr[i],0.5,{delay:0.1*i,y:(_flag?-1:1)*_h*_rows,alpha:0,ease:Back.easeOut});
			}
			_flag = !_flag;
		}
	}
}