本着瞎折腾的学习态度，在闲暇之余就是要搞点奇奇怪怪的事情。文中如有哪不对的地方，还请大家指出。本文项目github地址：https://github.com/SmallStoneSK/particle-effect

前言

今天要跟大家一起分享的是最近用canvas写的一个Particle粒子特效，这效果是很早就出现过了，所以想必大家应该都见到过(没见过的看下面的gif图，或者戳演示地址，或者直接看知乎首页。

以前第一次见到的时候，心想：哇靠，那么炫酷，这是怎么实现的？于是开始想各种可能的实现方案，但是却从来没有真正地去实现一次。最近闲下来之后又想到了这个特效，手痒就折腾了下，在这儿跟大家分享一下(代码中有哪不对的地方，欢迎拍砖，我改还不行吗…)。

动手前的思考

在动手前，不妨先思考一下这效果是怎么实现的呢？有两种方式：dom 或 canvas。

第一种dom方法，我们可以把页面上的粒子看做是一个个通过绝对定位布局的div，然后用定时器不断改变它们在页面中的top和left值，这样就可以模拟出粒子运动的效果。但是我们都知道对dom的操作是很耗性能的，如果粒子的数量少的话可能还好，但要是碰到个逗逼(比如像我这样的)把粒子的数量设的超级大，那对浏览器来说，性能方面肯定是个顾虑。所以出于性能考虑，这种方法果断弃之。

第二种方法是用canvas来实现。想必大家都知道canvas是干嘛用的，其实说白了就是给你一块画布，然后你想怎么画就怎么画。那么对应到本文中要实现的这个Particle粒子特效，是不是只要把这个动画的每一帧都画出来就可以了？而要画出每一帧，是不是只要把这个场景中的所有元素对应到画布中的具体位置画出来就可以了？其实用canvas实现的一些动画、游戏的原理大抵都是如此。为了便于大家的理解，不妨瞅一眼下面的伪代码：

while(true) {// 清除上一帧clearLastFrame();// 绘制(Particle粒子特效的绘制包括drawParticle和drawLine)draw();// 延迟16.7s(对于人的肉眼而言，1秒60帧的动画就可以)sleep(1000/60);
}

实现设计

既然已经明确使用canvas来实现我们的Particle粒子特效，那在具体实现之前，我们不妨先来捋一捋整个过程。

1. init初始化

第一步：在html的body中先插入一个带id的canvas标签，以便在js中找到它。

<canvas id="canvas"><p>your browser doesn't support canvas.</p>
</canvas>

* {margin: 0;padding: 0;
}
html, body {width: 100%;height: 100%;background-color: #292d35;
}

第二步：新建一个ParticleEffect.js文件，添加一个init方法，需要设置canvas的宽高，获取canvas的上下文。

// 粒子特效
var ParticleEffect = {ctx: null,canvas: null,init: function() {var windowSize = Utils.getWindowSize();  // 获取窗口大小this.canvas = document.getElementById('canvas');this.ctx = this.canvas.getContext('2d');if(this.ctx) {// 设置canvas的宽高this.canvas.width = windowSize.width;this.canvas.height = windowSize.height;// 在这里，你就可以开始用ctx随心所欲的画画了}}
};// 工具
var Utils = {getWindowSize: function() {return {width: this.getWindowWidth(),height: this.getWindowHeight()};},getWindowWidth: function() {return window.innerWidth || document.documentElement.clientWidth;},getWindowHeight: function() {return window.innerHeight || document.documentElement.clientHeight;}
};

2.构造Particle类

我们会利用工厂模式创造一个Particle类，给每个粒子都添加以下属性：

// 粒子类
function Particle(info) {// 粒子属性this.x = info.x;            // 粒子在画布中的横坐标this.y = info.y;            // 粒子在画布中的纵坐标this.vx = info.vx;          // 粒子的横向运动速度this.vy = info.vy;          // 粒子的纵向运动速度this.color = info.color;    // 粒子的颜色this.scale = info.scale;    // 粒子的缩放比例this.radius = info.radius;  // 粒子的半径大小// 绘制方法if(typeof Particle.prototype.draw === 'undefined') {Particle.prototype.draw = function(ctx) {// canvas画圆方法ctx.beginPath();ctx.fillStyle = this.color;ctx.strokeStyle = this.color;ctx.arc(this.x, this.y, this.radius * this.scale, 0, 2 * Math.PI, false);ctx.closePath();ctx.fill();}}
}

3.生成粒子

现在我们就可以在init方法中用刚创建好的Particle类来生成我们的粒子了。这里还有一点需要注意的就是，为了模拟粒子运动的真实性，我们就得随机的赋予粒子的各个属性，包括横坐标、纵坐标、横向速度、纵向速度、半径、缩放比例。具体的就看下面代码吧：

var ParticleEffect = {// ... 省去其他代码init: function() {// ... 省去其他代码 if(this.ctx) {// ... 省去其他代码// 生成100个粒子(这里需要注意的是，由于粒子是有半径的，所以初始的x, y值范围需要相应的调整)var times = 100;this.particles = [];while(times--) {this.particles.push(new Particle({x: Utils.rangeRandom(10, windowSize.width - 10),y: Utils.rangeRandom(10, windowSize.height - 10),vx: Utils.rangeRandom(-1.2, 1.2),vy: Utils.rangeRandom(-1.2, 1.2),color: 'rgba(255,255,255,.2)',scale: Utils.rangeRandom(0.8, 1.2),radius: 10}));}}}
};var Utils = {... // 省去其他代码rangeRandom: function(min, max) {const diff = max - min;return min + Math.random() * diff;}
};

4.让粒子动起来

终于到了激动人心的时候了，在这一步中，我们就让粒子满屏的动起来。

第一步：添加move方法，更新粒子的x, y坐标。需要注意的是，在每次更新完粒子的坐标以后，需要检测是否有碰到墙壁。如果有的话，需要改变粒子的运动方向。

var ParticleEffect = {// ... 省去其他代码move: function() {var windowSize = Utils.getWindowSize();this.particles.forEach(function(item) {// 更新粒子坐标item.x += item.vx;item.y += item.vy;// 如果粒子碰到了左墙壁或右墙壁，则改变粒子的横向运动方向if((item.x - item.radius < 0) || (item.x + item.radius > windowSize.width)) {item.vx *= -1;}// 如果粒子碰到了上墙壁或下墙壁，则改变粒子的纵向运动方向if((item.y - item.radius < 0) || (item.y + item.radius > windowSize.height)) {item.vy *= -1;}});}
};

第二步：添加draw方法，控制canvas每次绘制的内容(我们先不绘制粒子之间的连线，先让粒子动起来看到效果)。

var ParticleEffect = {// ... 省去其他代码draw: function() {var _this = this;// 每次重新绘制之前，需要先清空画布，把上一次的内容清空this.ctx.clearRect(0, 0, windowSize.width, windowSize.height);// 绘制粒子this.particles.forEach(function(item) {item.draw(_this.ctx);});// TODO: 绘制粒子之间的连线// 粒子移动，更新相应的x, y坐标this.move();}
};

第三步：添加run方法，使用定时器，不断重新绘制canvas上的内容

var ParticleEffect = {// ... 省去其他代码run: function() {this.init();setInterval(this.draw.bind(this), 1000 / 60);}
};

第四步：到这儿就是调用了，调用下Particle.run方法就可以让满屏的粒子动起来了。

<body><canvas id="canvas"><p>your browser doesn't support canvas.</p></canvas><script src="./Particle.js"></script><script>window.onload = function() {ParticleEffect.run();};</script>
</body>

5.回过头来绘制粒子之间的线条

通过观察不难发现，在粒子运动的过程中，两个粒子之间的距离比较远的时候是不相连的，只有当两个粒子运动到一定距离范围之内才会相连，而远了之后细线又会断开。所以实现起来也不难，只要遍历所有粒子之间的距离，只要小于一个阈值，我们就用canvas画一条线，把这两个粒子连接起来。具体代码如下：

var ParticleEffect = {// ... 省去其他代码draw: function() {// ... 省去其他代码// 绘制粒子之间的连线for(var i = 0; i < this.particles.length; i++) {for(var j = i + 1; j < this.particles.length; j++) {var distance = Math.sqrt(Math.pow(this.particles[i].x - this.particles[j].x, 2) + Math.pow(this.particles[i].y - this.particles[j].y, 2));if(distance < 100) {// 这里我们让距离远的线透明度淡一点，距离近的线透明度深一点this.ctx.strokeStyle = 'rgba(255,255,255,' + (distance / 100 * .2) + ')';this.ctx.beginPath();this.ctx.moveTo(this.particles[i].x, this.particles[i].y);this.ctx.lineTo(this.particles[j].x, this.particles[j].y);this.ctx.closePath();this.ctx.stroke();}}}}
};

6.添加粒子与鼠标之间的连线

其实完成上面的这个步骤，粒子特效已经基本上能跑了。但是我们还可以再添加粒子跟鼠标之间的交互效果，比如当鼠标与粒子之间的距离小于一定阈值时，连接粒子与鼠标。话不多说，看下面的代码：

var ParticleEffect = {// ... 省去其他代码mouseCoordinates: {x: 0, y: 0},init: function() {// ... 省去其他代码// 监听鼠标的mouseMove事件，记录下鼠标的x,y坐标window.addEventListener('mousemove', this.handleMouseMove.bind(this), false);},draw: function() {// ... 省去其他代码// 绘制粒子和鼠标之间的连线for(i = 0; i < this.particles.length; i++) {distance = Math.sqrt(Math.pow(this.particles[i].x - this.mouseCoordinates.x, 2) + Math.pow(this.particles[i].y - this.mouseCoordinates.y, 2));if(distance < 100) {this.ctx.strokeStyle = 'rgba(255,255,255,' + (1 - distance / 100) * .3 + ')';this.ctx.beginPath();this.ctx.moveTo(this.particles[i].x, this.particles[i].y);this.ctx.lineTo(this.mouseCoordinates.x, this.mouseCoordinates.y);this.ctx.closePath();this.ctx.stroke();}}},handleMouseMove: function(event) {var x, y;event = event || window.event;// 处理兼容if(event.pageX || event.pageY) {x = event.pageX;y = event.pageY;} else {x = event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;y = event.clientY + document.body.scrollTop + document.documentElement.scrollTop;}this.mouseCoordinates = {x: x, y: y};}
};

未完，待续…

其实做到这儿，已经能够看到效果了。但是，还有还有很多可以进一步优化的地方。比如：粒子动效的参数可配置化，canvas自适应窗口大小，requestAnimationFrame代替setInterval，缓存windowSize等等… 这些内容将在下一章中再做介绍。

手把手教你系列 - Particle粒子特效（上）相关推荐

手把手教你系列 - Particle粒子特效（完整代码部分）
本着瞎折腾的学习态度,在闲暇之余就是要搞点奇奇怪怪的事情.文中如有哪不对的地方,还请大家指出. 本文项目github地址:https://github.com/SmallStoneSK/particl ...
手把手教你制作AppPreview视频并上传到appStore进行审核
手把手教你制作AppPreview视频并上传到appStore进行审核注意,你需要使用iMovie才能够制作AppPreview视频文件,用QuickTime录制的无效! 最终效果 1. 新建一个事 ...
微商城搭建教程，手把手教你开通自己的线上/定制微商城！
微商城应该如何开通和搭建?这个问题一直困扰着很多商家,今天就为大家整理一份关于微商城从开通到搭建的具体教程,手把手教商家搭建自己的线上微商城. 微商城搭建教程,手把手教你开通自己的线上微商城! (一) ...
手把手教你在阿里云ECS上搭建惊艳的博客
手把手教你在阿里云ECS上搭建惊艳的博客相信大多数人都有自己搭建博客网站的想法,本文就手把手一步一步的进行,最终结果类似如下样式: 网站软件的选择软件选择成熟而免费的WordPress,WordP ...
「云原生 | Docker」手把手教你搭建镜像仓库并上传/下载镜像
手把手教你搭建镜像仓库一.选择镜像仓库二.使用 Docker 官方仓库 1. 注册账号并登录 2. 创建私有仓库 3. 设置私有秘钥 3. 登录 Docker 仓库 4. 上传镜像到 Docker ...
手把手教你制作一个带特效的全景图片
一个好的产品才会令人印象深刻,全景图也是这样.这篇文章教你制作一个带特效的全景图片,让你的全景图片"靓"起来. 第一步.准备一张2:1的全景图片.如果不知道全景图是怎么制作的话,可 ...
手把手教你在夜神、雷电上搭frida+Xposed
一.目标李老板: 奋飞呀,你天天手把手教这样不好吧? 奋飞:老板你想多了,就咱们行业这种男女比例,有啥不好的? 二.步骤夜神Frida 先adb连上夜神,看看它是嘛系统 fenfeiMac:Des ...
【愚公系列】华为云轻应用之手把手教你用搭一个WeLink上的出差应用丨【AppCube X WeLink双剑合璧】
文章目录一.AppCube X WeLink 1.AppCube介绍 2.WeLink介绍二.AppCube 1.AppCube的配置 1.1 配置流程步骤 1.2 轻应用搭建 2.AppCube ...
python selenium右键另存为_手把手教你系列练习篇之1python+ selenium自动化测试（详细教程）...
1.简介相信各位小伙伴或者同学们通过前面已经介绍了的Python+Selenium基础篇,通过前面几篇文章的介绍和练习,Selenium+Python的webUI自动化测试算是一只脚已经迈入这个门 ...

手把手教你系列 - Particle粒子特效（上）

前言