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月前
|
前端开发
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
css实用技巧——异步加载图片时,在图片完成加载前,鼠标悬浮到占位图片上时显示图片的alt信息
26 0
|
6月前
好看的网站自适应图片文字广告位代码
上边是图片广告位,下边是文字广告位,都是自适应的。 图片觉得不直观的可以去网站看看 代码从网上扒的,自己也修改了一下,更美观、也更适应网站。 一个好的广告位不仅不会拉低网站的颜值,还会增加广告主选择你的机会
166 2
好看的网站自适应图片文字广告位代码
|
6月前
图片的缩放源代码与使用
图片的缩放源代码与使用
33 0
|
6月前
|
Dart
Flutter 学习之图片的选择、裁切、保存
Flutter 学习之图片的选择、裁切、保存 在Flutter中,我们可以通过调用系统的图片选择器来选择一张图片,也可以通过使用插件来实现图片的裁切和保存。
336 0
|
12月前
|
小程序 JavaScript API
小程序图片渲染
小程序图片渲染
107 0
|
定位技术 API 容器
百度地图覆盖物加载svg图片的实战案例分析
百度地图覆盖物加载svg图片的实战案例分析
573 0
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
图片和文件预览组件(部分源码),可拖动,缩小,放大。 #41
146 0
|
存储 C语言 计算机视觉
加载美女图片之OpenCV 图像读取与显示
加载美女图片之OpenCV 图像读取与显示
|
计算机视觉
【图片操作】生成动态图片
动态图片我们使用的还是比较频繁的,平时的表情包有很多动图。今天我们要做的就是自己制作动态图片,其实就是将视频转换成动图,操作起来非常简单。下面我们就来看看如何实现吧。
577 0
|
Java API Maven
一行代码搞定图片缩略图处理
不知道大家现在工作中还有没有使用过Java处理图片的。强哥在大学毕业后,从事服务端WEB开发,就很少接触图片处理。有接触图片的,大多也就是图片的上传下载。所以,对Java处理图片相关的技术也都没怎么接触。
一行代码搞定图片缩略图处理
下一篇
无影云桌面