junqiuzhang / boom-js

boomJS is a libaray for implementing the explosion effect of particles

boomJS

boomJS is a library for implementing the explosion effect of particle.

boomJS can achieve particle explosion effects on any DOM node, and can achieve cool effects through simple APIs.

中文文档

Features

• Based on webGL implementation, good performance, large-scale particle explosion effect can be achieved
• Simple, just call boomJS function
• Lightweight, only 14KB in size
• Configurable number of particles, initial velocity, acceleration, explosion duration, etc
• Support animation callbacks
• Support Promise

Configuration

Parameter name	Type	Default value	Description
m	number	width	The number of x-axis particles to split, one particle per pixel is split by default
n	number	height	The number of y-axis particles to split, the default is to split one particle per pixel
a	number	0.001	Drag acceleration in pixels per frame ^2
speed	number	1	Initial motion speed in pixels per frame
duration	number	1000	Motion time, in frames
onStart	() => void	none	Callback to the beginning of particle effects
onEnd	() => void	none	Callback to end of particle effect

declare function boomJS(node: Element, config?: IConfig): Promise<unknown>;
interface IConfig {
  m?: number; // The number of particles on the x axis of the explosion
  n?: number; // The number of particles on the y axis of the explosion
  a?: number; // Drag acceleration (px / frame ^ 2)
  speed?: number; // Initial motion speed (px / frame)
  duration?: number; // Motion time (frame)
  onStart?: () => void; // Callbacks of beginning
  onEnd?: () => void; // Callback of end
}

Use

import boomJS from "webgl-boom-js";
document.body.addEventListener("click", (e) => {
  const ele = e.target;
  boomJS(ele).then(() => {});
});

Or

import boomJS from "webgl-boom-js";
document.body.addEventListener("click", (e) => {
  const ele = e.target as HTMLElement;
  boomJS(ele, {
    a: 0.001,
    speed: 1,
    duration: 3000,
    onStart: () => {
      ele.style.opacity = "0";
    },
    onEnd: () => {
      ele.style.opacity = "1";
    },
  });
});

Used in the project

Command Line:

npm i webgl-boom-js

import boomJS from "webgl-boom-js";

Use in the page

Introduce:

<script src="./dist/boom.min.js" defer=""></script>

License

MIT

boom-js's Issues

A question

nable to clone WebGL context as it has preserveDrawingBuffer=false
There have been errors reported here