webgl-boom-js是一个实现粒子爆炸效果的库，它的功能很简单，就是“炸掉 DOM 元素”。下面就是一个简单的例子，可以在点击时“炸掉”点击的 DOM 元素：

原理

看名字也知道，webgl-boom-js核心是使用webgl实现的（这也意味着它必须在兼容webgl的浏览器上运行），简单说就是先把 DOM 元素转换为图片，然后用webgl绘制这个图片“爆炸”的效果，得益于webgl出色的绘制性能，我们可以轻松实现60fps。

具体的方案涉及比较多webgl的知识：

在页面上插入一个满屏的canvas，获取webgl上下文
记录 DOM 元素的位置和尺寸信息，同时将 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（不含html2canvas）
支持动画开始和结束回调
支持 Promise

Github

webgl-boom-js: - github.com/junqiuzhang…

同时安利一下本人的其他 Github 项目：

web版Minecraft：github.com/junqiuzhang…
拖拽库：github.com/junqiuzhang…
react虚拟化渲染：github.com/junqiuzhang…

webgl-boom-js——轻松帮你实现粒子爆炸效果

原理

使用方式

安装

使用

功能

特点

Github