Skip to content

boomJS is a libaray for implementing the explosion effect of particles

License

Notifications You must be signed in to change notification settings

junqiuzhang/boom-js

Repository files navigation

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

About

boomJS is a libaray for implementing the explosion effect of particles

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published