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;
}
}
}
- Hadoop(十五)MapReduce程序实例
- dubbox 的各种管理和监管
- bash魔法堂:History用法详解
- 大众点评cat系统的搭建笔记
- 我们只能在安全和隐私之间寻求平衡吗?
- Docker Compose 1.18.0 之服务编排详解
- 让IE7/8使用CSS中first-child和last-child样式属性
- dubbo/dubbox 增加原生thrift及avro支持
- Hadoop(十四)MapReduce原理分析
- dubbox 增加google-gprc/protobuf支持
- 统计02:怎样描绘数据
- ActiveMQ笔记(1):编译、安装、示例代码
- centos ssh终端下高亮显示git分支名
- Django ORM模型:想说爱你不容易
- 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 数组属性和方法
- SpringBoot+Gradle+ MyBatisPlus3.x搭建企业级的后台分离框架
- frp 内网穿透远程桌面(Windows 10)配置
- 你来讲讲AQS是什么吧?都是怎么用的?
- Angular单元测试里pipe的mock设计
- 亿级数据判断 bitmap-布隆过滤器
- centOS8 安装MySQL8(亲测)
- 聊一聊微信小程序包内容
- 全面分析 MySQL并发控制
- Flink History Server
- 几种定时任务(Timer、TimerTask、ScheduledFuture)的退出—结合真实案例【JAVA并发】
- gitlab内存消耗大,频繁出现502错误的解决办法
- Java基于POI实现excel任意多级联动下拉列表——支持从数据库查询出多级数据后直接生成【附源码】
- Elasticsearch 通过Scroll遍历索引,构造pandas dataframe 【Python多进程实现】
- 【Java】 NullPointerException、ArrayIndexOutOfBoundsException、ClassCastException、ArrayIndexOutOfBoundsE
- Meow攻击删除不安全(开放的)的Elasticsearch(及MongoDB) 索引,建一堆以Meow结尾的奇奇怪怪的索引(如:m3egspncll-meow)