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;
		}
	}
}
目录
相关文章
|
11天前
|
人工智能 JSON 自然语言处理
让教学更智慧:用阿里云百炼工作流,自动生成中小学教材内容#小有可为#有温度的AI
通过可视化工作流编排,将大模型推理能力转化为标准化的教学内容生成引擎。教师只需输入教材标题和适用学段,即可自动获得结构完整、符合课程标准的章节内容,大幅降低备课门槛,助力教育资源均衡化。
489 126
|
20天前
|
Linux 程序员 数据格式
【2026最新】Notepad++下载、安装和使用一篇搞定(附中文版安装包)
Notepad++ 是一款免费开源、轻量高效的 Windows 文本编辑器,支持 C/Python/HTML 等 80+ 语言语法高亮、代码折叠、正则替换、编码转换及插件扩展,专为程序员与文本处理用户打造,完美替代系统记事本。(239字)
|
5天前
|
人工智能 缓存 安全
Claude Code 封号真实原因曝光,这次彻底不装了,直接针对国内开发者的账号下手?
Claude Code 封号潮背后:逆向扒出客户端隐写区域标记,Anthropic 政策收紧叠加 DeepSeek 7 月涨价,国产替代更紧迫。
|
7天前
|
人工智能 安全 Cloud Native
Higress 新发布:AI Gateway 能力增强,Gateway API 及其推理扩展持续打磨
增强 AI 网关能力,持续打磨 Gateway API 及其推理扩展。
352 124
|
6天前
|
人工智能 安全 程序员
终于,Claude Code 封号的原因被曝光了!竟然针对中国用户,植入隐形代码?!
通俗易懂地揭秘 Claude Code 封号的手段,分享一些自己对 AI 编程困境的思考,Codex、Cursor、DeepSeek、智谱 GLM、甚至是豆包,都有所行动了
372 1
|
15天前
|
机器学习/深度学习 人工智能 调度
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
HappyHorse 1.1 是新一代视频生成大模型,全面升级动态表现力、角色一致性、指令遵循、视觉质感与音画协同能力。支持I2V/T2V/R2V三类生成,适配短剧、电商广告、品牌营销等场景,提供高质、流畅、可控的AI视频生产力。
866 5
🐴 HappyHorse 1.1 现已上线阿里云百炼!快来查收模型使用指南,现在调用享 6 折~
|
12天前
|
人工智能 定位技术 SEO
我学 GEO 第 15 天:终于知道AI GEO该如何做?
我是暴走的莉莉酱,边旅行边研究AI GEO的数字游民。专注普通人如何提升“AI可见度”——让AI在回答用户问题时准确识别、理解并推荐你。不讲玄学,只做可测、可调、可持续的GEO实践。
472 127