TweenLite的又一应用:图片的拼图加载效果
时间:2022-04-23
本文章向大家介绍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;
}
}
}
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 使用Angular依赖注入自定义SAP Spartacus的ProductAdapter
- 获取SAP Spartacus当前显示产品json数据的又一办法
- SAP Spartacus注入自定义的CurrentProductService
- Redis系列(十三)应用之分布式锁
- Oracle数据库 sql条件查询语句与练习
- (六)Hive优化
- mapreduce -- wordcount执行流程
- (三)Hive基本操作命令
- 链表神操作 --- 快慢指针
- appium教程_2.概念加深
- [javascript] cdn模式下vue和vue-router实现路由
- (干货)前端实现导出excel的功能
- 完美解决JavaScript的深浅拷贝
- 来,我们在重新说下,线程状态?
- [不定时一题]LeetCode两数相加