webgl-boom-js——轻松帮你实现粒子爆炸效果
webgl-boom-js是一个实现粒子爆炸效果的库，它的功能很简单，就是“炸掉 DOM 元素”。 下面就是一个简单的粒子，可以在点击时“炸掉”对应的 DOM 元素：
原理
看名字也知道，webgl-boom-js是使用webgl实现的（这也意味着它必须在兼容webgl的浏览器上运行），简单说就是先把 DOM 元素转换为图片，然后用canvas画这个图片“爆炸”的效果。
得益于webgl出色的性能，我们可以轻松实现60fps。
具体的方案涉及比较多webgl的知识：
在页面上插入一个满屏的
canvas，获取webgl上下文将 DOM 元素转换为图片，这里我们借助
html2canvas实现(github.com/niklasvh/ht…)生成粒子网格，我们需要计算出每个粒子的中心点位置以及每个粒子的尺寸，这里使用 js 实现
将粒子网格数据和图片纹理数据分别写入顶点缓冲区和纹理缓冲区
编写顶点着色器代码，为每个粒子生成一个随机方向，根据时间 t 计算粒子当前位置
编写片元着色器代码，这里只需要读取图片纹理数据渲染即可
requestAnimationFrame循环修改时间 t 的值，并重新渲染 canvas
使用方式
安装
npm i webgl-boom-js 复制代码
使用
import boomJS from "webgl-boom-js"; document.body.addEventListener("click", (e) => { const ele = e.target as HTMLElement; boomJS(ele, { speed: 0.001, duration: 3000, onStart: () => { ele.style.opacity = "0"; }, onEnd: () => { ele.style.opacity = "1"; }, }); }); 复制代码功能
支持配置粒子数
支持配置爆炸速度和爆炸时长
支持动画回调
特点
基于 webGL 实现，性能好，可实现大规模粒子爆炸效果
轻量，体积仅 14KB
可配置，可配置粒子数，爆炸速度，爆炸时长等
支持动画回调
支持 Promise
作者：移步西龙
链接：https://juejin.cn/post/7020323930846003208