炫彩logo粒子效果

canvas&svg 同时被 3 个专栏收录
9 篇文章 0 订阅
21 篇文章 0 订阅
37 篇文章 0 订阅
前端开发whqet,csdn,王海庆,whqet,前端开发专家

昨天我们学习了利用requestAnimationFrame优化动画控制,然后就忍不住冲动,在fork别人codepen的基础上,实现了这个炫彩logo粒子效果,效果预览如下。


 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
                                      ==== 炫彩logo粒子1====    == 全屏预览==   == 在线编辑==    == 下载收藏==    == 赞助投票==
 ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

思路解析

1.canvas绘制图像

2.取得图像像素点

3.粒子效果附加在像素点上

实现步骤

html文档结构和css非常简单,不赘述,直接来代码。

<canvas id='c'></canvas>
html, body {
  height: 100%;
}

body {
  background: black;
  overflow: hidden;
}

canvas {
  max-width: 100%;
}

然后是核心的JS,这里我们同样用到requestAnimationFrame,不再详述,不确切的同学可以参加上篇文章。

为了避免canvas的跨域问题,这里使用base64的方式使用logo图片,图片转base64的工具可以使用这个。base64的方式太占篇幅,我们放到一个变量里,扔在代码的最前方,然后设置canvas,加载图像。

//数据存储,Base64图片信息,太长了占屏太多,请使劲往下拉。
var picUrl = "data:image/png;base64,……";
//canvas基础设置
var canvas = document.getElementById("c"),
	ctx = canvas.getContext("2d"),
	w = canvas.width = window.innerWidth,
	h = canvas.height = window.innerHeight,
	logoParticles = [],
	particleIndex = 0,
	logo = new Image(),
	hue = 0;
//设置图像
logo.src = picUrl;

当图像加载完成后,绘制图像,获取图像像素点,遍历像素点绑定粒子。

//加载完成后,获取图像像素,将粒子绑定在图像像素上
logo.onload = function() {
	var posX = (w - this.width) / 2,
		posY = (h - this.height) / 2;
	//绘制图形
	ctx.drawImage(this, posX, posY);
	//获取像素点
	var imgData = ctx.getImageData(0, 0, w, h),
		pixels = imgData.data;
	//遍历像素点,绑定粒子
	for (var y = 0; y < imgData.height; y += 3) {
		for (var x = 0; x < imgData.width; x += 3) {
			var alpha = pixels[((imgData.width * y) + x) * 4 + 3];
			if (alpha > 0) {
				logoParticles.push(new Particle(x, y));
			}
		}
	}
	//调用动画
	animate();
};

接着使用requestAnimationFrame动画机制动画粒子。

//requesetAnimationFrame的方式设置动画
function animate() {
	//调用polyfill
	requestAnimationFrame(animate);
	//本案例动画
	ctx.fillStyle = "rgba(0,0,0,.1)";
	ctx.fillRect(0, 0, w, h);
	for (var i in logoParticles) {
		logoParticles[i].draw();
	}
	hue += 1;
}

粒子类的属性有:origX、origY代表原来的坐标,x、y代表即时坐标,color代表颜色,maxLife代表最大生命周期,lift代表生命时间,vx、vy代表x、y方向的速度,grav代表重力,index代表粒子序号。

粒子类的方法有:draw绘制方法,update动画机制,reset重置,random去随机数。详细代码如下。

//粒子类定义
function Particle(x, y) {
	this.origX = this.x = x;
	this.origY = this.y = y;
	this.color = "white";
	this.maxLife = this.random(20);
	this.life = 0;
	this.vx = this.random(-1, 1);
	this.vy = this.random(-1, 1);
	this.grav = .04;
	this.index = particleIndex;
	logoParticles[particleIndex] = this;
	particleIndex++;
}
//粒子原型,draw、update、reset、random方法
Particle.prototype = {
	constructor: Particle,
	//绘制
	draw: function() {
		ctx.fillStyle = this.color;
		ctx.fillRect(this.x, this.y, 1, 1);
		this.update();
	},
	//动画
	update: function() {
		if (this.life >= this.maxLife) {
			logoParticles[this.index].reset();
		}
		this.x += this.vx;
		this.y += this.vy;
		this.vy += this.grav;
		this.life++;
	},
	//重置
	reset: function() {
		this.x = this.origX;
		this.y = this.origY;
		this.life = 0;
		this.color = "hsl(" + hue + ", 100%, 50%)";
		this.vx = this.random(-1, 1);
		this.vy = this.random(-1, 1);
	},
	//取随机数
	random: function() {
		var min = arguments.length == 1 ? 0 : arguments[0],
			max = arguments.length == 1 ? arguments[0] : arguments[1];
		return Math.random() * (max - min) + min;
	}

};

相关阅读

1.requestAnimationFrame动画控制详解

2. html5烟花绽放效果

3.html5式程序猿表白

4.单击控制爆炸粒子

5.小方框粒子

6.多彩折回弹起粒子

7.逼真火焰效果

8.WebGL酷炫粒子效果

感谢您耐心读完。

----------------------------------------------------------

前端开发whqet,关注web前端开发,分享相关资源,欢迎点赞,欢迎拍砖。

---------------------------------------------------------------------------------------------------------

评论 28 您还未登录,请先 登录 后发表或查看评论
©️2022 CSDN 皮肤主题:大白 设计师:CSDN官方博客 返回首页

打赏作者

whqet

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值