高级粒子烟花动效系统重力加速度、空气阻力与随机扰动模拟在现代 Web 应用的成就激励体系、节日活动主会场以及重大业务流程完成节点例如用户成功通关打卡、完成一笔大额投资、或者在游戏化任务中获得 SSR 勋章中一场绚丽夺目、充满真实重力质感的粒子烟花与彩带飞溅动效Celebration Fireworks Confetti是瞬间引爆用户多巴胺、将产品仪式感推向高潮的核心利器。然而很多初级前端在手写粒子效果时往往只使用简单的线性随机数x vx; y vy;。结果就是粒子像一群毫无质量的死板小点在屏幕上匀速漂浮缺乏空气阻力的减速刹车感也没有重力下坠的弧度看起来极其假、甚至有一种廉价的塑料劣质感。一个真正达到 AAA 级画质的粒子烟花动效系统必须在底层物理引擎中完整融合真实重力场、二次方空气流体阻力、布朗运动微扰动与色彩生命周期衰减。本文将深入推导粒子物理学的微分方程并在 HTML5 Canvas 中手写一个单屏承载 2000 个粒子满帧 60fps 飞驰的高性能烟花引擎。粒子动力学的三大核心物理方程在笛卡尔坐标系中设单个烟花粒子的位置为 $\mathbf{p} (x, y)$速度为 $\mathbf{v} (v_x, v_y)$质量为 $m$。每一帧作用在粒子上的合力 $\mathbf{F}_{total}$ 由三部分构成$$\mathbf{F}{total} \mathbf{F}{gravity} \mathbf{F}{drag} \mathbf{F}{turbulence}$$1. 恒定重力场Gravity$$\mathbf{F}_{gravity} (0, m \cdot g)$$沿垂直向下方向持续加速赋予粒子自然的抛物线下坠弧度。2. 空气流体粘滞阻力Aerodynamic Drag Force在流体力学中高速运动物体的空气阻力大小与速度的平方成正比方向与运动方向严格相反$$\mathbf{F}{drag} -\frac{1}{2} C_d \rho A |\mathbf{v}|^2 \cdot \hat{\mathbf{v}} -k{drag} \cdot |\mathbf{v}| \cdot \mathbf{v}$$物理直觉当烟花刚爆炸的一瞬间粒子速度极大空气阻力瞬间爆发将粒子快速“刹车减速”随着速度降低阻力迅速变小随后重力开始占据主导使粒子下沉形成先快后慢的极致炸裂手感3. 布朗随机热扰动Brownian Motion Turbulence为了模拟空气中的微风与微观热对流在每一帧注入一个微小的随机扰动向量 $\mathbf{F}_{turbulence} \sim \mathcal{N}(0, \sigma^2)$彻底打破死板的对称抛物线。[发射初速度 (v0, 爆炸向外放射)] │ ▼ (第一阶段: 高速阻力刹车减速 F_drag F_g) [微观悬停发光期 (Sparkling Stage)] │ ▼ (第二阶段: 重力主导平滑坠落 F_g F_drag 布朗扰动) [生命周期终止 (Alpha 衰减消散)]高性能粒子烟花引擎核心实现TypeScript// fireworks-particle-engine.ts export interface Particle { x: number; y: number; vx: number; vy: number; size: number; alpha: number; decayRate: number; // 生命周期衰减速率 hue: number; // 色相 isSpark: boolean; // 是否为高亮闪烁火星 } export class CelebrationFireworksEngine { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private particles: Particle[] []; // 物理常数配置 private gravity: number 0.18; // 重力加速度 (px/frame^2) private dragCoeff: number 0.035; // 空气阻力系数 constructor(canvas: HTMLCanvasElement) { this.canvas canvas; this.ctx canvas.getContext(2d)!; } // 触发一次绚丽烟花爆炸 public explode(originX: number, originY: number, count: number 120, baseHue: number 260) { for (let i 0; i count; i) { // 球面随机爆炸角度与初速度 const angle Math.random() * 2 * Math.PI; const speed Math.random() * 8.5 2.5; // 爆炸初速度 2.5 ~ 11.0 px/frame this.particles.push({ x: originX, y: originY, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, size: Math.random() * 2.5 1.5, alpha: 1.0, decayRate: Math.random() * 0.012 0.008, // 存活约 80 ~ 120 帧 hue: (baseHue (Math.random() - 0.5) * 40 360) % 360, isSpark: Math.random() 0.85, }); } } // 每一帧物理步进与渲染 public renderFrame() { const w this.canvas.width; const h this.canvas.height; // 核心技巧使用带 0.18 透明度的深色矩形擦除自发产生梦幻流光残影拖尾 (Motion Blur)! this.ctx.fillStyle rgba(9, 13, 22, 0.22); this.ctx.fillRect(0, 0, w, h); // 开启高亮颜色混合 (Additive Blending) this.ctx.globalCompositeOperation lighter; for (let i this.particles.length - 1; i 0; i--) { const p this.particles[i]; // 1. 计算空气流体阻力: a_drag -dragCoeff * v const currentSpeed Math.hypot(p.vx, p.vy); const dragForce this.dragCoeff * currentSpeed; p.vx - (p.vx / (currentSpeed || 1)) * dragForce; p.vy - (p.vy / (currentSpeed || 1)) * dragForce; // 2. 叠加重力加速度 p.vy this.gravity; // 3. 叠加微风布朗扰动 p.vx (Math.random() - 0.5) * 0.08; // 4. 更新位置 p.x p.vx; p.y p.vy; // 5. 衰减生命周期 p.alpha - p.decayRate; if (p.alpha 0) { this.particles.splice(i, 1); continue; } // 6. 绘制高亮发光粒子 this.ctx.beginPath(); this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI); const lightness p.isSpark Math.random() 0.4 ? 90 : 60; this.ctx.fillStyle hsla(${p.hue}, 100%, ${lightness}%, ${p.alpha}); this.ctx.fill(); } // 恢复默认混合模式 this.ctx.globalCompositeOperation source-over; } }生产级微交互集成实战在用户点击“完成挑战”按钮时瞬间在其光标周围激发出多重连环礼花// main.ts const stage new CelebrationFireworksEngine(document.getElementById(fireworksCanvas) as HTMLCanvasElement); function onMissionSuccess(buttonRect: DOMRect) { const x buttonRect.left buttonRect.width / 2; const y buttonRect.top buttonRect.height / 2; // 第一波极速靛蓝主爆炸 stage.explode(x, y, 140, 240); // 第二波延迟 120ms 金色副爆炸 setTimeout(() stage.explode(x 40, y - 30, 90, 45), 120); // 第三波延迟 240ms 玫瑰粉终极爆炸 setTimeout(() stage.explode(x - 50, y - 20, 110, 330), 240); }总结粒子系统的魅力在于简单微观物理规则在宏观空间中自发涌现的绚烂奇迹。将重力加速度、流体阻力与布朗扰动的微分方程精确编织进 Canvas 渲染循环我们就能在屏幕上以极其轻量的算力为每一次业务成功交付绽放出令人叹为观止的物理级绚烂烟花。 高级粒子烟花动效系统：重力加速度、空气阻力与随机扰动模拟
高级粒子烟花动效系统重力加速度、空气阻力与随机扰动模拟在现代 Web 应用的成就激励体系、节日活动主会场以及重大业务流程完成节点例如用户成功通关打卡、完成一笔大额投资、或者在游戏化任务中获得 SSR 勋章中一场绚丽夺目、充满真实重力质感的粒子烟花与彩带飞溅动效Celebration Fireworks Confetti是瞬间引爆用户多巴胺、将产品仪式感推向高潮的核心利器。然而很多初级前端在手写粒子效果时往往只使用简单的线性随机数x vx; y vy;。结果就是粒子像一群毫无质量的死板小点在屏幕上匀速漂浮缺乏空气阻力的减速刹车感也没有重力下坠的弧度看起来极其假、甚至有一种廉价的塑料劣质感。一个真正达到 AAA 级画质的粒子烟花动效系统必须在底层物理引擎中完整融合真实重力场、二次方空气流体阻力、布朗运动微扰动与色彩生命周期衰减。本文将深入推导粒子物理学的微分方程并在 HTML5 Canvas 中手写一个单屏承载 2000 个粒子满帧 60fps 飞驰的高性能烟花引擎。粒子动力学的三大核心物理方程在笛卡尔坐标系中设单个烟花粒子的位置为 $\mathbf{p} (x, y)$速度为 $\mathbf{v} (v_x, v_y)$质量为 $m$。每一帧作用在粒子上的合力 $\mathbf{F}_{total}$ 由三部分构成$$\mathbf{F}{total} \mathbf{F}{gravity} \mathbf{F}{drag} \mathbf{F}{turbulence}$$1. 恒定重力场Gravity$$\mathbf{F}_{gravity} (0, m \cdot g)$$沿垂直向下方向持续加速赋予粒子自然的抛物线下坠弧度。2. 空气流体粘滞阻力Aerodynamic Drag Force在流体力学中高速运动物体的空气阻力大小与速度的平方成正比方向与运动方向严格相反$$\mathbf{F}{drag} -\frac{1}{2} C_d \rho A |\mathbf{v}|^2 \cdot \hat{\mathbf{v}} -k{drag} \cdot |\mathbf{v}| \cdot \mathbf{v}$$物理直觉当烟花刚爆炸的一瞬间粒子速度极大空气阻力瞬间爆发将粒子快速“刹车减速”随着速度降低阻力迅速变小随后重力开始占据主导使粒子下沉形成先快后慢的极致炸裂手感3. 布朗随机热扰动Brownian Motion Turbulence为了模拟空气中的微风与微观热对流在每一帧注入一个微小的随机扰动向量 $\mathbf{F}_{turbulence} \sim \mathcal{N}(0, \sigma^2)$彻底打破死板的对称抛物线。[发射初速度 (v0, 爆炸向外放射)] │ ▼ (第一阶段: 高速阻力刹车减速 F_drag F_g) [微观悬停发光期 (Sparkling Stage)] │ ▼ (第二阶段: 重力主导平滑坠落 F_g F_drag 布朗扰动) [生命周期终止 (Alpha 衰减消散)]高性能粒子烟花引擎核心实现TypeScript// fireworks-particle-engine.ts export interface Particle { x: number; y: number; vx: number; vy: number; size: number; alpha: number; decayRate: number; // 生命周期衰减速率 hue: number; // 色相 isSpark: boolean; // 是否为高亮闪烁火星 } export class CelebrationFireworksEngine { private canvas: HTMLCanvasElement; private ctx: CanvasRenderingContext2D; private particles: Particle[] []; // 物理常数配置 private gravity: number 0.18; // 重力加速度 (px/frame^2) private dragCoeff: number 0.035; // 空气阻力系数 constructor(canvas: HTMLCanvasElement) { this.canvas canvas; this.ctx canvas.getContext(2d)!; } // 触发一次绚丽烟花爆炸 public explode(originX: number, originY: number, count: number 120, baseHue: number 260) { for (let i 0; i count; i) { // 球面随机爆炸角度与初速度 const angle Math.random() * 2 * Math.PI; const speed Math.random() * 8.5 2.5; // 爆炸初速度 2.5 ~ 11.0 px/frame this.particles.push({ x: originX, y: originY, vx: Math.cos(angle) * speed, vy: Math.sin(angle) * speed, size: Math.random() * 2.5 1.5, alpha: 1.0, decayRate: Math.random() * 0.012 0.008, // 存活约 80 ~ 120 帧 hue: (baseHue (Math.random() - 0.5) * 40 360) % 360, isSpark: Math.random() 0.85, }); } } // 每一帧物理步进与渲染 public renderFrame() { const w this.canvas.width; const h this.canvas.height; // 核心技巧使用带 0.18 透明度的深色矩形擦除自发产生梦幻流光残影拖尾 (Motion Blur)! this.ctx.fillStyle rgba(9, 13, 22, 0.22); this.ctx.fillRect(0, 0, w, h); // 开启高亮颜色混合 (Additive Blending) this.ctx.globalCompositeOperation lighter; for (let i this.particles.length - 1; i 0; i--) { const p this.particles[i]; // 1. 计算空气流体阻力: a_drag -dragCoeff * v const currentSpeed Math.hypot(p.vx, p.vy); const dragForce this.dragCoeff * currentSpeed; p.vx - (p.vx / (currentSpeed || 1)) * dragForce; p.vy - (p.vy / (currentSpeed || 1)) * dragForce; // 2. 叠加重力加速度 p.vy this.gravity; // 3. 叠加微风布朗扰动 p.vx (Math.random() - 0.5) * 0.08; // 4. 更新位置 p.x p.vx; p.y p.vy; // 5. 衰减生命周期 p.alpha - p.decayRate; if (p.alpha 0) { this.particles.splice(i, 1); continue; } // 6. 绘制高亮发光粒子 this.ctx.beginPath(); this.ctx.arc(p.x, p.y, p.size, 0, 2 * Math.PI); const lightness p.isSpark Math.random() 0.4 ? 90 : 60; this.ctx.fillStyle hsla(${p.hue}, 100%, ${lightness}%, ${p.alpha}); this.ctx.fill(); } // 恢复默认混合模式 this.ctx.globalCompositeOperation source-over; } }生产级微交互集成实战在用户点击“完成挑战”按钮时瞬间在其光标周围激发出多重连环礼花// main.ts const stage new CelebrationFireworksEngine(document.getElementById(fireworksCanvas) as HTMLCanvasElement); function onMissionSuccess(buttonRect: DOMRect) { const x buttonRect.left buttonRect.width / 2; const y buttonRect.top buttonRect.height / 2; // 第一波极速靛蓝主爆炸 stage.explode(x, y, 140, 240); // 第二波延迟 120ms 金色副爆炸 setTimeout(() stage.explode(x 40, y - 30, 90, 45), 120); // 第三波延迟 240ms 玫瑰粉终极爆炸 setTimeout(() stage.explode(x - 50, y - 20, 110, 330), 240); }总结粒子系统的魅力在于简单微观物理规则在宏观空间中自发涌现的绚烂奇迹。将重力加速度、流体阻力与布朗扰动的微分方程精确编织进 Canvas 渲染循环我们就能在屏幕上以极其轻量的算力为每一次业务成功交付绽放出令人叹为观止的物理级绚烂烟花。