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

简介: 晚上在逛天地会时,看到一个关于TweenLite的示例,觉得蛮实用的,整理了一下偷过来:) 注:播放完后,鼠标猛击胸部即可重放:) 思路点评:刚开始看到这个效果时,觉得应该蛮复杂的,后来看了代码之后,发现居然如此简单! 关键:先加载一张完整的图片,然后利用BitmapData的copyPixels功能,把每个小块的像素copy出来,形成一系列新的BitmapData(也就是一块块小图片),然后再利用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;
		}
	}
}
目录
相关文章
|
4月前
|
前端开发 UED
一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?
一个页面上有大量的图片,加载很慢,你有哪些方法优化这些图片的加载?
|
15天前
|
索引
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
【sgPhotoPlayer】自定义组件:图片预览,支持点击放大、缩小、旋转图片
|
19天前
|
Android开发 开发者
Android开发之通过渲染纹理展示地球仪
该文阐述了如何使用OpenGL为三维物体添加纹理,以增强其真实感。纹理坐标是二维的,用于标记摊平后的“布料”对应物体的哪个部位,类似裁缝制作衣服的过程。在OpenGL中,启用纹理和深度测试是关键,还包括设置纹理参数、分配纹理编号、绑定位图材质等步骤。计算材质的纹理坐标后,通过`glDrawArrays`结合顶点和纹理坐标逐个贴图。最终示例展示了将世界地图贴到球体上形成逼真的地球仪效果。通过控制旋转、平移和缩放,能实现简单的三维动画效果。
12 2
Android开发之通过渲染纹理展示地球仪
|
1月前
好看的网站自适应图片文字广告位代码
上边是图片广告位,下边是文字广告位,都是自适应的。 图片觉得不直观的可以去网站看看 代码从网上扒的,自己也修改了一下,更美观、也更适应网站。 一个好的广告位不仅不会拉低网站的颜值,还会增加广告主选择你的机会
15 2
好看的网站自适应图片文字广告位代码
|
5月前
|
小程序 JavaScript API
小程序图片渲染
小程序图片渲染
68 0
|
9月前
|
定位技术 API 容器
百度地图覆盖物加载svg图片的实战案例分析
百度地图覆盖物加载svg图片的实战案例分析
388 0
|
9月前
|
定位技术
百度标注地图markers图片icon不正常显示的样式冲突解决方案
百度标注地图markers图片icon不正常显示的样式冲突解决方案
103 0
|
10月前
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
90 0
|
12月前
|
存储 C语言 计算机视觉
加载美女图片之OpenCV 图像读取与显示
加载美女图片之OpenCV 图像读取与显示
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理

热门文章

最新文章