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