前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >TweenLite的又一应用:图片的拼图加载效果

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

作者头像
菩提树下的杨过
发布2018-01-23 16:28:38
6560
发布2018-01-23 16:28:38
举报

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

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

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

代码:

代码语言:javascript
复制
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;
		}
	}
}
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2010-09-22 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档