https://pixlips.github.io/js/fireworks.js

1const numberOfParticules = 20;
2
3const minOrbitRadius = 50;
4const maxOrbitRadius = 100;
5
6const minCircleRadius = 10;
7const maxCircleRadius = 20;
8
9const minAnimeDuration = 900;
10const maxAnimeDuration = 1500;
11
12const minDiffuseRadius = 50;
13const maxDiffuseRadius = 100;
14
15let canvasEl = document.querySelector(".fireworks");
16let ctx = canvasEl.getContext("2d");
17let pointerX = 0;
18let pointerY = 0;
19
20let colors = ["102, 167, 221", "62, 131, 225", "33, 78, 194","232, 6, 6"];
21// 设置画布尺寸
22function setCanvasSize() {
23  canvasEl.width = window.innerWidth;
24  canvasEl.height = window.innerHeight;
25  canvasEl.style.width = window.innerWidth + "px";
26  canvasEl.style.height = window.innerHeight + "px";
27}
28
29function updateCoords(e) {
30  pointerX =
31    e.clientX ||
32    (e.touches[0] ? e.touches[0].clientX : e.changedTouches[0].clientX);
33  pointerY =
34    e.clientY ||
35    (e.touches[0] ? e.touches[0].clientY : e.changedTouches[0].clientY);
36}
37// 粒子扩散方向
38function setParticuleDirection(p) {
39  let angle = (anime.random(0, 360) * Math.PI) / 180;
40  let value = anime.random(minDiffuseRadius, maxDiffuseRadius);
41  let radius = [-1, 1][anime.random(0, 1)] * value;
42  return {
43    x: p.x + radius * Math.cos(angle),
44    y: p.y + radius * Math.sin(angle),
45  };
46}
47// 创建粒子
48function createParticule(x, y) {
49  let p = {};
50  p.x = x;
51  p.y = y;
52  p.color =
53    "rgba(" +
54    colors[anime.random(0, colors.length - 1)] +
55    "," +
56    anime.random(0.8, 2) +
57    ")";
58  p.radius = anime.random(minCircleRadius, maxCircleRadius);
59  p.endPos = setParticuleDirection(p);
60  p.draw = function() {
61    ctx.beginPath();
62    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
63    ctx.fillStyle = p.color;
64    ctx.fill();
65  };
66  return p;
67}
68// 创建扩散圈
69function createCircle(x, y) {
70  let p = {};
71  p.x = x;
72  p.y = y;
73  p.color = "#fff";
74  p.radius = 0.1;
75  p.alpha = 0.5;
76  p.lineWidth = 6;
77  p.draw = function() {
78    ctx.globalAlpha = p.alpha;
79    ctx.beginPath();
80    ctx.arc(p.x, p.y, p.radius, 0, 2 * Math.PI, true);
81    ctx.lineWidth = p.lineWidth;
82    ctx.strokeStyle = p.color;
83    ctx.stroke();
84    ctx.globalAlpha = 1;
85  };
86  return p;
87}
88// 绘制粒子
89function renderParticule(anim) {
90  for (let i = 0; i < anim.animatables.length; i++) {
91    anim.animatables[i].target.draw();
92  }
93}
94// 绘制烟火
95function animateParticules(x, y) {
96  let circle = createCircle(x, y);
97  let particules = [];
98  for (let i = 0; i < numberOfParticules; i++) {
99    particules.push(createParticule(x, y));
100  }
101  anime
102    .timeline()
103    .add({
104      targets: particules,
105      x: function(p) {
106        return p.endPos.x;
107      },
108      y: function(p) {
109        return p.endPos.y;
110      },
111      radius: 0.1,
112      duration: anime.random(minAnimeDuration, maxAnimeDuration),
113      easing: "easeOutExpo",
114      update: renderParticule,
115    })
116    .add({
117      targets: circle,
118      radius: anime.random(minOrbitRadius, maxOrbitRadius),
119      lineWidth: 0,
120      alpha: {
121        value: 0,
122        easing: "linear",
123        duration: anime.random(600, 800),
124      },
125      duration: anime.random(1200, 1800),
126      easing: "easeOutExpo",
127      update: renderParticule,
128      offset: 0,
129    });
130}
131
132let render = anime({
133  duration: Infinity,
134  update: () => {
135    ctx.clearRect(0, 0, canvasEl.width, canvasEl.height);
136  },
137});
138
139document.addEventListener(
140  "mousedown",
141  (e) => {
142    render.play();
143    updateCoords(e);
144    animateParticules(pointerX, pointerY);
145  },
146  false
147);
148
149setCanvasSize();
150window.addEventListener("resize", setCanvasSize, false);