【JavaScript】explode动画
这是一个js实现的粒子聚合文字或图片的动画特效
部分程序如下
n.container = n.container[0] || n.container; /*有且仅有一个container*/ var width = n.params.width;
var height = n.params.height;
var wWidth = document.body.clientWidth;
var wHeight = document.body.clientHeight; n.container.width = width;
n.container.height = height;
var ctx = n.container.getContext('2d');
var c = document.createElement('canvas');
var ct = c.getContext('2d'); /*用于绘制图片或文字*/
var items = [];
var picture = null;
var requestId = null;
var total = 0;
var getRandom = function(max, min) {
min = arguments[1] || 0;
return Math.floor(Math.random() * (max - min + 1) + min); /*取min和max之间的随机数*/
}; function cutSlice() {/*cutSlice()方法,实现粒子动画,让其往最终位置运动*/
ctx.clearRect(0, 0, n.container.width, n.container.height);
for(var i = 0; i < c.width * c.height; i++) {
var item = items[i];
var targetX = item.targetX;
var targetY = item.targetY;
var currentX = item.currentX;
var currentY = item.currentY;
var ax = false;
var ay = false;
if(!item.isLock) {
if(Math.abs(targetX - currentX) <= .5) {
item.currentX = targetX;
ax = true;
} else {
item.currentX += (targetX - currentX) * item.ax;
};
if(Math.abs(targetY - currentY) <= .5) {
item.currentY = targetY;
ay = true;
} else {
item.currentY += (targetY - currentY) * item.ay;
};
if(ax && ay) {/*只有ax和ay同时到达终点时,total才会减1*/
total--;
item.isLock = true;
}
};
var ix = item.currentX;
var iy = item.currentY;
ctx.putImageData(item.data, ix, iy); /*putImageData() 方法将图像数据(从指定的 ImageData 对象)放回画布上。*/
};
if(total > 0) {
requestId = requestAnimationFrame(cutSlice); /*不用设置间隔,反复调用*/
} else {
cancelAnimationFrame(requestId); };
} function Item(data, targetX, targetY, currentX, currentY) {/*创建一个Item构造函数,用来放置每一个粒子*/
this.data = data;
this.targetX = targetX; /*聚合的最终位置*/
this.targetY = targetY;
this.currentX = currentX;/*当前位置*/
this.currentY = currentY;
this.ax = .13 - Math.random() * .06; /*ax和ay分别表示运动速度*/
this.ay = .16 - Math.random() * .08;
} function drawCanvas() {
if(n.params.type == 2) { /*针对图片*/
picture = new Image();
picture.crossOrigin = "";
picture.onload = function() {
var pw = picture.width;
var ph = picture.height;
c.width = pw; /*设置canvas的宽度*/
c.height = ph;
ct.drawImage(picture, 0, 0, pw, ph, 0, 0, pw, ph); /*把图像中的某个区域绘制到上下文中,源图像(起点和宽高),上下文中的起点和宽高*/
draw(pw, ph);
};
picture.src = n.params.img;
} else { /*针对文字*/
var word = n.params.text;
ct.font = '60px Arial'; /*这里指定用于测文本宽度*/
var w = ct.measureText(word).width; /*测文本宽度*/
var h = 100;
c.width = w;
c.height = h;
ct.fillStyle = 'deepskyblue';
ct.font = '60px Arial'; /*这里指定用于绘制文本,应与之前设置保持一致*/
// ct.textAlign = 'center';
ct.textBaseline = 'middle';
ct.fillText(word, 0, 50); /*绘制文本,这里为什么没有直接绘制上去?而要调用draw???*/
draw(w, h);
} function draw(pw, ph) {/*draw 方法用来分解粒子,先分成cols 列和rows 行,每一个粒子高度都为1,然后用
getImageData() 来获取ImageData对象,然后创建新的Item实例,然后添加到items数组中。*/
var w = 1;
var h = 1;
var cols = Math.floor(pw / w);/*图片或文字的宽度高度*/
var rows = Math.floor(ph / h);
for(var i = 0; i < c.width * c.height; i++) {
var x = Math.floor(i % cols); /*通过xy找到每一行的所有元素(0,0)(1,0)...(0,1)(1,1)(2,1)*/
var y = Math.floor(i / cols);
var data = ct.getImageData(x * w, y * h, w, h);/* 文字也能获取??拷贝!取得原始图像数据,要取得取数据的画面区域的xy坐标以及该区域的像素宽度和高度,这里每次取1*1像素*/
var vx = getRandom(300, -300);
var vy = getRandom(500, -500); /*扩大范围,使图片周围也有粒子*/
var item = new Item(data, x, y, x + vx, y + vy);
items.push(item);
};
total = items.length;
cutSlice();
}
}
【JavaScript】explode动画的更多相关文章
- JavaScript实现动画效果
说到JavaScript实现动画效果,不得不想到两个函数,setTimeout和setInterval. setTimeout的常用的使用方法为 setTimeout(callback, delay) ...
- 原生JavaScript中动画与特效的实现原理
现如今,许多页面上均有一些动画效果.适当的动画效果可以在一定程度上提高页面的美观度,具有提示效果的动画可以增强页面的易用性. 实现页面动画的途径一般有两种. 一种是通过操作JavaScript间接操作 ...
- javascript帧动画
前面的话 帧动画就是在“连续的关键帧”中分解动画动作,也就是在时间轴的每帧上逐帧绘制不同的内容,使其连续播放而成的动画.由于是一帧一帧的画,所以帧动画具有非常大的灵活性,几乎可以表现任何想表现的内容. ...
- javascript之动画特效
JavaScript的动画用的最多的3个api就是setInterval().setTimeout()和requestAnimationFrame()
- "Javascript高性能动画与页面渲染"笔记
前言:好久没翻阅我的gmail邮箱了,午休时就打开看了一下,看到InfoQ推荐的一篇名为“Javascript高性能动画与页面渲染”文章,粗略的看了一下,很赞!讲的很详细,对好些细节讲的都很好,很通俗 ...
- Javascript高性能动画与页面渲染
转自:http://www.infoq.com/cn/articles/javascript-high-performance-animation-and-page-rendering No setT ...
- JavaScript之动画2
在JavaScript动画中,我们调用setInterval函数(setInterval动作的作用是在播放动画的时,每隔一定时间就调用函数,方法或对象),值得注意的是:setInterval它设置的时 ...
- Javascript - Jquery - 动画
动画(Dynamic) JQuery动画必须是在标准文档下使用 否则可能引起动画时抖动或其它不可预知的结果,标准文档格式: <!DOCTYPE html PUBLIC "-//W3 ...
- [转]Javascript高性能动画与页面渲染
No setTimeout, No setInterval 作者 李光毅 发布于 2014年4月30日 如果你不得不使用setTimeout或者setInterval来实现动画,那么原因只能是你需要精 ...
随机推荐
- C# 之文件拖拽和pixturBox缩放与拖拽
文件拖拽: 效果:将一个文件拖拽到窗体的某个控件时,将该控件的路径显示在该控件上,只要拿到了路径自然可以读取文件中的内容了. 将一个控件的属性AllowDrop设置为true,然后添加DragDrop ...
- 【转】Windows 平台下 Go 语言的安装和环境变量设置
1. Go 语言 SDK 安装包下载和安装 最新稳定版 1.5.3 安装包 go1.5.3.windows-amd64.msi下载地址 https://golang.org/dl/,大小约 69 MB ...
- Mysql压缩版forWindows安装与配置
参考:http://blog.csdn.net/wengengeng/article/details/52013650
- kinect 深度图像去噪算法
算法设计思路 (1)读取16位深度图像到待处理图像帧组: (2)ROI区域计算 由于kinect 彩色摄像头和红外深度摄像头是存在视角偏差的,经过视角对齐后,得到的深度图像是有黑边的.此处通过取帧组第 ...
- 对JDK、JRE和JVM的一些浅薄理解
JDK:JDK(Java Development Kit),顾名思义是java程序的开发包,任何java程序想要运行都需要相应版本的JDK,可以到oracle下载(下载之后自带JRE和编译工具等,无需 ...
- tensorboard实现tensorflow可视化
1.工程目录 2.data.input_data.py的导入 在tensorflow更新之后可以进行直接的input_data的导入 # from tensorflow.examples.tutori ...
- XAMPP添加二级域名
1.在hosts中添加域名 2.点击config选择httpd.conf,去掉Include前面的#号 3.取消NameVirtualHost前面的##,在页面底端添加二级域名 4.重启xampp
- IhyerDB modBus采集器配置.
近期查了一下ihyerDB-modbus采集器的相关配置,由于没有相关的modbus设备,于是今天上午根据网上的线索下载了Modbus Slave(modbus从站仿真器).笔记本也没有串口,于是下载 ...
- 如何用kindle看论文
kindle的pdf显示效果向来不好,那么如何把pdf转换成mobi格式呢 可以把个人文件(pdf)发送至您的[发送至Kindle]电子邮箱时,在电子邮件的主题栏中填写"convert&qu ...
- d3js selections深入理解
D3 selections选择DOM元素以便可以对这些dom元素做相应的操作,比如:更改其style,修改其属性,执行data-join操作,或者插入.删除相应elements 比如,如果给定5个ci ...