简介：HTML和JavaScript是网页开发的核心技术，结合使用可实现生动的动态视觉效果。本文介绍的烟花特效脚本基于HTML构建页面结构，利用JavaScript控制动画逻辑，实现烟花发射、爆炸、散落及音效同步等完整过程。通过坐标定位、随机颜色生成、重力模拟和事件交互等技术，为用户提供沉浸式视觉体验。该特效还涵盖性能优化策略，适合用于节日页面、互动活动或前端学习实践。
1. HTML页面结构搭建与容器定义
在网页烟花特效开发中，HTML结构是整个动画系统的骨架。本章将从页面结构设计入手，确保动画元素具备良好的可扩展性和跨设备兼容性。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>烟花特效</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="fireworks-container" id="fireworks">
<!-- 烟花粒子将通过JS动态插入 -->
</div>
<script src="fireworks.js"></script>
</body>
</html>
该HTML模板采用语义化标签与模块化结构， <div class="fireworks-container"> 作为烟花粒子的容器，通过 id 绑定JavaScript逻辑。使用 <meta viewport> 标签适配移动端视口，保证动画在不同设备上流畅渲染。
2. JavaScript动画核心控制与requestAnimationFrame应用
在现代网页动画开发中，JavaScript是控制动画流程和状态更新的核心工具。而 requestAnimationFrame （简称 raf ）作为浏览器提供的原生动画驱动接口，已成为实现高性能动画的首选方案。本章将深入探讨动画循环的基本机制，分析 setTimeout 和 setInterval 的局限性，并重点解析 requestAnimationFrame 的工作原理与优势。通过构建一个基于 raf 的主动画循环，我们将掌握如何在烟花特效中实现平滑、高效且可控的动画系统。
2.1 动画循环机制的基本原理
2.1.1 浏览器重绘与帧率的关系
浏览器在渲染页面时，遵循一定的绘制流程，包括样式计算（Style）、布局（Layout）、绘制（Paint）和合成（Composite）。这一流程通常以固定的频率执行，也就是我们常说的“帧率”（Frame Rate），通常为每秒60帧（60Hz）。
动画的流畅性依赖于每一帧的及时更新与渲染。如果JavaScript代码在每帧中执行逻辑计算和DOM操作的时间过长，就会导致帧率下降，从而造成卡顿或画面撕裂。
帧率与时间的关系如下表所示：
| 帧率（FPS） | 每帧最大可用时间（毫秒） |
|---|---|
| 60 | 16.67 |
| 50 | 20 |
| 30 | 33.33 |
结论 ：要实现60帧的动画，JavaScript逻辑必须在每帧中控制在16毫秒内完成。
2.1.2 setTimeout与setInterval的局限性分析
在 requestAnimationFrame 出现之前，开发者通常使用 setTimeout 或 setInterval 来模拟动画循环，但它们存在以下问题：
- 时间精度低 ：
setTimeout和setInterval的时间参数是近似值，无法与浏览器重绘周期同步。 - 无法暂停/恢复 ：当页面标签切换或浏览器进入低功耗模式时，
setTimeout和setInterval仍会继续执行，造成资源浪费。 - 可能跳帧 ：如果某帧计算耗时过长，定时器无法自动跳过该帧，导致动画卡顿。
例如，使用 setInterval 实现动画的代码如下：
let position = 0;
setInterval(() => {
position += 1;
document.getElementById('box').style.left = position + 'px';
}, 16);
这段代码的问题在于：
- 无法与浏览器重绘同步，可能导致不必要的重排（Reflow）。
- 如果主线程被阻塞，
setInterval仍会继续触发，导致动画跳帧或延迟。
2.2 requestAnimationFrame的优势与工作机制
2.2.1 自适应刷新率的同步渲染
requestAnimationFrame 是浏览器为动画专门设计的API，它会在下一次重绘之前调用指定的回调函数，确保动画逻辑与重绘同步。
function animate() {
// 执行动画逻辑
requestAnimationFrame(animate);
}
requestAnimationFrame(animate);
上述代码构建了一个递归调用的动画循环。它的优势在于：
- 自动同步帧率 ：与浏览器刷新率保持一致，避免跳帧。
- 智能调度 ：当页面隐藏或浏览器处于节能模式时，
raf会自动暂停，节省资源。 - 高精度时间戳 ：回调函数接收一个
DOMHighResTimeStamp参数，用于计算时间差。
2.2.2 节能与性能优化背后的浏览器策略
浏览器在调用 requestAnimationFrame 时，会根据当前页面状态动态调整执行策略：
- 页面隐藏时 ：自动暂停动画，防止后台页面持续消耗CPU。
- 屏幕刷新率变化时 ：如使用高刷新率显示器（如120Hz），
raf也会自动适配新的刷新频率。 - 低电量模式下 ：浏览器可能降低帧率以节省电量。
这些策略使得 requestAnimationFrame 成为构建高性能动画的基础。
2.3 基于raf的主动画循环实现
2.3.1 初始化动画控制器函数
我们可以构建一个通用的动画控制器函数，用于管理动画的启动、暂停与时间控制。
let animationId;
let lastTime = 0;
function animate(currentTime) {
const deltaTime = currentTime - lastTime;
lastTime = currentTime;
// 执行动画逻辑，例如更新粒子位置
update(deltaTime);
draw();
animationId = requestAnimationFrame(animate);
}
function startAnimation() {
lastTime = performance.now();
animationId = requestAnimationFrame(animate);
}
function stopAnimation() {
if (animationId) {
cancelAnimationFrame(animationId);
}
}
代码解析 ：
-currentTime：浏览器传入的高精度时间戳，单位为毫秒。
-deltaTime：用于计算帧间隔时间，确保动画逻辑与帧率无关。
-update(deltaTime)：更新动画状态，如粒子位置、速度等。
-draw()：将状态绘制到页面上，如更新DOM样式或Canvas内容。
2.3.2 时间戳参数deltaTime的计算与应用
使用 deltaTime 可以实现与帧率无关的动画速度控制。例如，假设我们希望每秒移动100px：
function update(deltaTime) {
const speed = 100; // pixels per second
position += (speed * deltaTime) / 1000;
}
逻辑分析 ：
-deltaTime单位为毫秒，需除以1000转换为秒。
- 这样无论帧率是60还是30，动画的移动速度都能保持一致。
2.4 烟花系统中动画状态的管理实践
2.4.1 启动、暂停与重置逻辑封装
在烟花特效中，我们通常需要控制多个动画状态，例如启动、暂停、重置。可以封装一个动画状态管理类：
class AnimationManager {
constructor() {
this.animationId = null;
this.running = false;
this.lastTime = 0;
}
start() {
if (this.running) return;
this.running = true;
this.lastTime = performance.now();
this.animationId = requestAnimationFrame(this.animate.bind(this));
}
stop() {
if (this.animationId) {
cancelAnimationFrame(this.animationId);
this.running = false;
}
}
reset() {
this.stop();
this.lastTime = 0;
// 重置粒子系统等
}
animate(currentTime) {
const deltaTime = currentTime - this.lastTime;
this.lastTime = currentTime;
this.update(deltaTime);
this.draw();
if (this.running) {
this.animationId = requestAnimationFrame(this.animate.bind(this));
}
}
update(deltaTime) {
// 子类实现具体更新逻辑
}
draw() {
// 子类实现绘制逻辑
}
}
参数说明 ：
-running：标识动画是否正在运行。
-lastTime：用于计算deltaTime。
-animationId：用于取消动画请求。
2.4.2 多实例共存时的状态隔离设计
在复杂的烟花系统中，可能会有多个烟花同时发射。为了避免状态冲突，每个烟花实例应拥有独立的状态管理。
class Firework {
constructor(config) {
this.position = config.position;
this.velocity = config.velocity;
this.alive = true;
}
update(deltaTime) {
// 更新单个烟花状态
this.position.y += this.velocity.y * (deltaTime / 1000);
if (this.position.y <= 0) {
this.alive = false;
}
}
draw(ctx) {
ctx.beginPath();
ctx.arc(this.position.x, this.position.y, 2, 0, Math.PI * 2);
ctx.fillStyle = 'red';
ctx.fill();
}
}
class FireworkManager extends AnimationManager {
constructor() {
super();
this.fireworks = [];
}
addFirework(position, velocity) {
this.fireworks.push(new Firework({ position, velocity }));
}
update(deltaTime) {
this.fireworks.forEach(f => f.update(deltaTime));
this.fireworks = this.fireworks.filter(f => f.alive);
}
draw() {
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
this.fireworks.forEach(f => f.draw(ctx));
}
}
逻辑说明 ：
-FireworkManager继承自AnimationManager，用于管理多个Firework实例。
- 每个Firework拥有自己的位置、速度和生命周期。
-update方法中，过滤掉已消散的烟花，避免内存泄漏。
-draw方法中使用Canvas绘制所有存活的烟花。
mermaid流程图：动画状态管理流程
graph TD
A[开始动画] --> B{是否正在运行?}
B -- 否 --> C[初始化时间戳]
C --> D[注册raf回调]
D --> E[执行update]
E --> F[执行draw]
F --> G[继续注册raf]
G --> H[循环执行]
B -- 是 --> I[跳过启动]
J[用户点击暂停] --> K[取消raf]
K --> L[停止动画]
流程图说明 ：
- 图中展示了动画状态的完整控制流程，从启动、运行到暂停。
- 包括了requestAnimationFrame的递归调用机制与状态控制逻辑。
本章通过深入剖析动画循环机制、 requestAnimationFrame 的工作原理与实现方式，并结合烟花系统的实际需求，构建了一个结构清晰、可扩展的动画控制体系。下一章我们将探讨烟花特效中的坐标系统与CSS定位技术，进一步提升动画的真实感与性能表现。
3. 烟花坐标系统与CSS定位/变换技术
在实现网页端烟花动画时，精确控制每个粒子的运动轨迹是决定视觉效果真实感的关键。而这一切的基础，正是对屏幕坐标系统的深入理解以及高效运用CSS定位与变换技术来驱动DOM元素的空间位移。本章将从底层坐标映射机制出发，逐步构建一套适用于复杂粒子系统的空间控制系统，并结合数学建模与前端渲染优化策略，实现高性能、高还原度的烟花动态表现。
3.1 屏幕坐标系与DOM元素位置映射
前端开发中，页面上的每一个可视元素都存在于一个二维笛卡尔坐标系中，其原点位于浏览器视口左上角 (0, 0) ，X轴向右为正，Y轴向下为正。这一坐标体系被称为 屏幕坐标系 或 客户端坐标系 。为了精准地控制烟花粒子的发射起点、飞行路径和爆炸中心，必须准确获取并操作这些坐标的映射关系。
3.1.1 offsetTop、offsetLeft与getBoundingClientRect()详解
在传统布局中， offsetTop 和 offsetLeft 是最常用的属性之一，用于获取元素相对于其 最近有定位（relative/absolute/fixed）的祖先元素 的偏移值。然而，在复杂的嵌套结构中，这种相对性可能导致计算偏差。
更推荐的做法是使用 getBoundingClientRect() 方法，它返回一个 DOMRect 对象，包含当前元素相对于 视口 的位置信息：
const element = document.querySelector('.firework');
const rect = element.getBoundingClientRect();
console.log({
top: rect.top, // 相对于视口顶部的距离
left: rect.left, // 相对于视口左侧的距离
width: rect.width,
height: rect.height
});
| 属性 | 含义 | 是否受滚动影响 |
|---|---|---|
offsetTop / offsetLeft | 相对于定位祖先的偏移 | 否 |
clientTop / clientLeft | 元素边框内缘到内容区起始位置（通常不用于定位） | 否 |
getBoundingClientRect().top/left | 相对于视口的位置 | 是（随滚动变化） |
⚠️ 注意：
getBoundingClientRect()返回的是 浮点数 ，适合做高精度动画插值；同时它是只读方法，不会触发重排。
示例：将鼠标点击位置转换为绝对坐标用于烟花发射
document.addEventListener('click', (e) => {
const x = e.clientX;
const y = e.clientY;
createFirework(x, y); // 以点击点为发射源
});
此代码利用了事件对象中的 clientX/Y ，它们本质上与 getBoundingClientRect() 处于同一坐标系——即视口坐标系，无需额外转换即可直接用于定位。
graph TD
A[用户点击屏幕] --> B{浏览器生成 MouseEvent}
B --> C[提取 clientX/clientY]
C --> D[作为烟花初始坐标]
D --> E[创建粒子并设置 transform: translate(x, y)]
E --> F[启动动画循环]
该流程图展示了从用户交互到坐标采集再到动画初始化的完整链条，强调了坐标一致性在整个系统中的重要性。
3.1.2 视口单位（vw/vh）与绝对定位结合使用技巧
为了使烟花特效适配不同设备分辨率，应避免使用固定像素值进行布局。采用视口单位（ vw , vh ）可以实现响应式定位：
-
1vw = 1% of viewport width -
1vh = 1% of viewport height
例如，若希望烟花从屏幕底部中央升起：
.firework-launcher {
position: absolute;
bottom: 5vh;
left: 50vw;
transform: translateX(-50%);
}
这种方式的优势在于：
- 不依赖父容器尺寸
- 自动适应横竖屏切换
- 配合 calc() 可实现复杂偏移逻辑
进一步扩展，我们可以在JavaScript中动态解析视口单位对应的像素值：
function vwToPx(vw) {
return (vw * window.innerWidth) / 100;
}
function vhToPx(vh) {
return (vh * window.innerHeight) / 100;
}
// 示例：随机生成位于中间偏上的爆炸点
const randomX = vwToPx(30 + Math.random() * 40); // 30vw ~ 70vw
const randomY = vhToPx(20 + Math.random() * 30); // 20vh ~ 50vh
通过将视口单位转化为像素坐标，既保留了响应式优势，又满足了JavaScript动画引擎对具体数值的需求。
3.2 使用CSS transform实现高性能位移
当需要频繁更新元素位置时，传统的 top/left 定位方式会引发 强制重排（reflow） 和 重绘（repaint） ，严重影响性能。相比之下， CSS transform 特别是 translate3d() 提供了一种硬件加速的替代方案。
3.2.1 translate3d触发GPU加速机制解析
现代浏览器通过分层（layerization）机制优化渲染性能。当元素应用了 transform: translate3d() 或 will-change: transform 时，浏览器会将其提升为独立图层（compositing layer），交由GPU处理合成，从而绕过主线程的布局与绘制阶段。
.particle {
position: absolute;
width: 4px;
height: 4px;
background: white;
border-radius: 50%;
/* 启用硬件加速 */
transform: translate3d(0, 0, 0);
will-change: transform;
}
在每一帧动画中，只需更新 transform 值：
function updateParticle(particle, x, y) {
particle.style.transform = `translate3d(${x}px, ${y}px, 0)`;
}
相比修改 left/top ：
// ❌ 慢：触发布局重计算
particle.style.left = `${x}px`;
particle.style.top = `${y}px`;
| 更新方式 | 是否触发重排 | 是否可GPU加速 | 推荐程度 |
|---|---|---|---|
left/top | 是 | 否 | ❌ 不推荐 |
transform: translate() | 否 | 是（部分） | ✅ 推荐 |
transform: translate3d() | 否 | 是（强制） | 🔥 最佳实践 |
💡 小贴士：添加
z=0的第三个参数（即使不用Z轴）可明确告诉浏览器启用3D上下文，确保图层提升。
3.2.2 scale与rotate在碎片飞散中的视觉增强作用
除了位移， transform 还可用于模拟爆炸瞬间的形变效果。例如，粒子刚生成时可短暂放大再缩小，营造“迸发”感：
// 创建粒子时赋予初始缩放
element.style.transform = `translate3d(${x}px, ${y}px, 0) scale(0)`;
// 在raf循环中逐渐恢复至1
this.scale += 0.2;
element.style.transform = `translate3d(${x}px, ${y}px, 0) scale(${this.scale})`;
此外，旋转可用于不规则碎片的表现：
const rotation = Math.random() * 360; // 随机角度
element.style.transform += ` rotate(${rotation}deg)`;
综合使用多种变换函数，可大幅提升视觉丰富度：
.particle--explosion {
animation: flicker 0.6s ease-out forwards;
}
@keyframes flicker {
0% { opacity: 1; transform: scale(0) rotate(0deg); }
50% { opacity: 0.9; transform: scale(1.4) rotate(20deg); }
100% { opacity: 0.7; transform: scale(1) rotate(10deg); }
}
上述动画模拟了火花闪烁的过程，结合JavaScript动态注入样式类，可实现多样化的爆发风格。
3.3 坐标系统的数学建模
为了让烟花呈现出自然的放射状轨迹，必须借助数学工具建立粒子运动模型。其中，极坐标到直角坐标的转换是最核心的技术手段。
3.3.1 极坐标向直角坐标的转换公式
极坐标使用 (r, θ) 表示点的位置，其中：
- r ：距离原点的半径（即速度大小）
- θ ：与X轴正方向夹角（弧度制）
转换为直角坐标：
x = r \cdot \cos(\theta) \
y = r \cdot \sin(\theta)
在JavaScript中实现如下：
function polarToCartesian(r, theta) {
return {
x: r * Math.cos(theta),
y: r * Math.sin(theta)
};
}
应用场景：烟花爆炸时，希望粒子均匀分布在360°范围内：
const numParticles = 100;
const baseSpeed = 5;
for (let i = 0; i < numParticles; i++) {
const angle = (i / numParticles) * Math.PI * 2; // 均匀分布
const { x, y } = polarToCartesian(baseSpeed, angle);
particles.push(new Particle(initialX, initialY, x, y));
}
📊 参数说明：
-angle：步进均匀保证方向分散
-baseSpeed：控制整体扩散强度
- 可引入随机扰动提升自然感
3.3.2 发射角度与初速度向量分解
上升阶段的烟花通常沿垂直方向发射，但也可支持倾斜发射以增加多样性。此时需对初速度进行向量分解：
假设发射角度为 angle （相对于水平线），初速度为 speed ：
class Firework {
constructor(x, y, angle = Math.PI / 2, speed = 8) {
this.x = x;
this.y = y;
this.vx = Math.cos(angle) * speed; // 水平分量
this.vy = Math.sin(angle) * speed; // 垂直分量（注意：向下为正）
}
update() {
this.x += this.vx;
this.y += this.vy;
this.vy *= 0.98; // 轻微减速模拟空气阻力
}
}
| 参数 | 类型 | 作用 |
|---|---|---|
angle | 弧度 | 控制发射方向（π/2 ≈ 90° 表示向上） |
speed | 数值 | 决定上升快慢 |
vx/vy | 向量分量 | 用于每帧更新位置 |
通过调整 angle ，可实现斜向发射、扇形喷射等特殊效果：
// 扇形发射：±30度范围内
const spread = Math.PI / 6; // 30度
const randomAngle = Math.PI / 2 - spread / 2 + Math.random() * spread;
3.4 多粒子定位批量处理策略
当同时存在数百个粒子时，逐个操作 .style 属性会造成严重的性能瓶颈。因此必须采取批量更新策略，减少DOM访问频率。
3.4.1 批量更新style属性避免强制重排
关键原则： 读写分离，合并操作
错误做法：
particles.forEach(p => {
p.el.style.left = p.x + 'px'; // 触发重排
p.el.style.top = p.y + 'px'; // 再次重排
});
正确做法：
// 先批量读取（触发一次重排）
const positions = particles.map(p => ({ x: p.x, y: p.y }));
// 再统一写入（避免反复重排）
positions.forEach((pos, idx) => {
particles[idx].el.style.transform = `translate3d(${pos.x}px, ${pos.y}px, 0)`;
});
更优方案是使用文档片段或离屏渲染缓冲，但在动画场景中仍以 transform 批量更新为主。
3.4.2 使用CSS自定义属性（CSS Variables）驱动动态样式
现代CSS提供了变量机制，允许我们在JS中传入参数，由CSS完成最终计算：
:root {
--particle-x: 0px;
--particle-y: 0px;
}
.particle {
transform: translate3d(var(--particle-x), var(--particle-y), 0);
}
JS中动态设置：
element.style.setProperty('--particle-x', `${x}px`);
element.style.setProperty('--particle-y', `${y}px`);
优势：
- 减少字符串拼接开销
- 支持动画过渡（配合 transition ）
- 易于集成进组件化系统
表格对比三种定位方式性能特征：
| 方式 | 性能 | 灵活性 | 兼容性 | 推荐场景 |
|---|---|---|---|---|
left/top | 低 | 高 | 高 | 静态定位 |
transform: translate3d() | 高 | 高 | 中（IE10+） | 动画主路径 |
| CSS Variables + transform | 极高 | 中 | 较新（需Modernizr检测） | 大规模粒子系统 |
最终建议：在支持的前提下优先使用 transform + CSS变量 组合，构建可扩展、高性能的多粒子定位架构。
4. 随机颜色与大小动态生成算法
在构建网页烟花特效时，视觉吸引力至关重要。为了让烟花在爆炸时呈现出丰富而自然的视觉效果，我们需要为每个粒子赋予随机的颜色与大小。这些属性不仅决定了烟花的外观，也影响着整体动画的表现力与沉浸感。本章将深入讲解如何在前端环境中通过JavaScript动态生成颜色与大小，并探讨其背后的算法逻辑与性能优化策略。
4.1 颜色空间基础知识与前端表示法
4.1.1 RGB、HSL与十六进制格式的选择依据
在Web开发中，颜色的表示方式主要有三种：RGB、HSL和十六进制（HEX）。它们各有优劣，适用于不同的场景。
| 表示方式 | 描述 | 优点 | 缺点 |
|---|---|---|---|
| RGB | 红绿蓝三通道值，范围0-255 | 简洁直观，兼容性好 | 不易调整亮度与饱和度 |
| HSL | 色相、饱和度、亮度，H范围0-360，S/L为百分比 | 更直观控制色彩变化 | 浏览器兼容性稍差 |
| HEX | 十六进制字符串表示，如 #ff0000 | 简洁且广泛使用 | 不支持透明度（需带alpha的 rgba() ） |
例如，使用HSL格式可以更方便地生成具有相似色调但不同亮度和饱和度的颜色，从而实现更自然的烟花粒子色彩过渡。
4.1.2 HSL调节亮度饱和度实现更自然的色彩过渡
HSL格式允许我们独立控制色相（Hue）、饱和度（Saturation）和亮度（Lightness），这在动态生成颜色时非常有用。例如，我们可以固定色相值，然后随机调整亮度和饱和度，从而生成同一色系但深浅不一的颜色，增强视觉层次感。
以下是一个使用HSL生成随机颜色的示例代码：
function getRandomHSLColor(hue, saturationRange = [50, 100], lightnessRange = [40, 80]) {
const s = Math.floor(Math.random() * (saturationRange[1] - saturationRange[0] + 1)) + saturationRange[0];
const l = Math.floor(Math.random() * (lightnessRange[1] - lightnessRange[0] + 1)) + lightnessRange[0];
return `hsl(${hue}, ${s}%, ${l}%)`;
}
逐行解析：
-
function getRandomHSLColor(...)：定义一个函数，接受主色调（hue）以及饱和度和亮度的范围。 -
Math.random()：生成0~1之间的随机数。 -
Math.floor(...)：向下取整以获取整数。 -
hsl(...)：将参数拼接为HSL字符串格式。
通过调整 saturationRange 和 lightnessRange 的值，我们可以控制颜色的丰富程度和明暗变化，从而在烟花爆炸时呈现更加自然的色彩过渡。
4.2 动态颜色生成策略
4.2.1 Math.random()在色相区间内的采样方法
为了使烟花颜色更具多样性，我们可以让色相（Hue）也随机变化。Hue的取值范围是0~360，我们可以使用 Math.random() 来生成随机的色相值：
function getRandomHue(min = 0, max = 360) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function getRandomColor() {
const h = getRandomHue();
const s = Math.floor(Math.random() * 31) + 70; // 70% ~ 100%
const l = Math.floor(Math.random() * 21) + 40; // 40% ~ 60%
return `hsl(${h}, ${s}%, ${l}%)`;
}
逻辑分析：
-
getRandomHue：生成指定范围内的随机色相值，用于多样化主色调。 -
s和l分别固定在一个较高区间，保证颜色足够鲜艳且不会太暗或太亮。 - 返回
hsl()字符串，可用于CSS样式设置。
这种方法可以在不使用预设调色板的情况下，生成大量视觉上协调的色彩，适合烟花这种需要色彩丰富但不杂乱的场景。
4.2.2 预设配色方案数组与加权随机选取
在某些场景下，我们可能希望烟花颜色更符合某种风格，例如节日主题或品牌色调。此时可以使用预设配色方案数组，并结合加权随机选择算法，使得某些颜色出现的概率更高。
const colorThemes = [
{ color: '#ff4500', weight: 3 }, // 橙红色
{ color: '#00bfff', weight: 2 }, // 浅蓝色
{ color: '#ff69b4', weight: 1 }, // 粉红色
];
function weightedRandomColor() {
const totalWeight = colorThemes.reduce((sum, item) => sum + item.weight, 0);
let random = Math.random() * totalWeight;
for (const item of colorThemes) {
if (random < item.weight) {
return item.color;
}
random -= item.weight;
}
}
逻辑分析：
-
colorThemes：定义一个颜色对象数组，每个对象包含颜色值和权重。 -
totalWeight：计算所有权重之和，用于生成随机数。 -
for循环中依次减去权重，当随机数落在某个区间时，返回对应颜色。
该算法确保了高权重颜色出现频率更高，从而实现更可控的视觉风格。
4.3 粒子尺寸的随机分布模型
4.3.1 正态分布模拟真实爆炸颗粒大小规律
在现实世界中，烟花爆炸时的碎片大小并不是完全随机的，而是遵循某种统计分布，例如正态分布。我们可以通过JavaScript模拟正态分布，使烟花粒子的大小更接近自然现象。
function gaussianRandom(mean = 5, stdDev = 2) {
let u = 0, v = 0;
while (u === 0) u = Math.random(); // 避免取0
while (v === 0) v = Math.random();
let num = Math.sqrt(-2.0 * Math.log(u)) * Math.cos(2.0 * Math.PI * v);
num = num * stdDev + mean;
return Math.max(1, Math.round(num)); // 确保最小尺寸为1
}
逻辑分析：
- 使用Box-Muller变换生成服从正态分布的随机数。
-
mean为均值，stdDev为标准差。 - 最终结果通过
Math.round()取整，并限制最小值为1。
通过该函数，我们可以生成一个以指定均值为中心、符合正态分布的粒子大小集合，使烟花爆炸看起来更自然。
4.3.2 min-max线性映射控制radius范围
如果我们不需要复杂的统计分布，只需在指定范围内生成粒子大小，可以使用线性映射的方法：
function randomRadius(min = 2, max = 10) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
此函数简单高效，适合需要快速生成随机粒子大小的场景。
4.4 可配置参数化系统设计
4.4.1 将颜色、大小等属性抽象为配置对象
为了增强烟花系统的可配置性与可维护性，我们可以将颜色、大小等属性抽象为配置对象，方便在不同场景下进行定制：
const fireworkConfig = {
color: {
useHSL: true,
hueRange: [0, 360],
saturationRange: [70, 100],
lightnessRange: [40, 60]
},
size: {
distribution: 'gaussian',
mean: 5,
stdDev: 2,
minSize: 1
},
particleCount: 100
};
这样我们可以在不修改核心逻辑的情况下，通过配置对象调整烟花的外观。
4.4.2 支持主题切换与用户自定义外观
通过将配置对象与主题机制结合，我们可以实现主题切换功能。例如，用户可以选择“节日红”、“海洋蓝”等主题，系统根据主题加载对应的配置：
function applyTheme(themeName) {
const themes = {
'holiday': {
color: { hueRange: [0, 30], saturationRange: [80, 100], lightnessRange: [40, 60] }
},
'ocean': {
color: { hueRange: [180, 240], saturationRange: [60, 90], lightnessRange: [50, 70] }
}
};
Object.assign(fireworkConfig.color, themes[themeName]?.color || {});
}
逻辑分析：
-
themes对象存储不同主题的配置。 -
applyTheme函数通过Object.assign将主题配置合并到全局配置中。 - 如果主题不存在，则不修改原有配置。
这种方式使得烟花系统具备高度的可定制性，用户可以通过界面选择或配置文件快速切换视觉风格。
小结与后续章节关联
在本章中，我们详细讲解了烟花粒子颜色与大小的动态生成策略，包括基于HSL的颜色控制、加权随机选取、正态分布模拟与线性映射等关键技术。这些方法不仅提升了烟花特效的视觉表现力，也为后续章节中的爆炸动画、运动轨迹建模等打下了坚实的基础。
下一章将进入烟花发射与上升动画的实现，我们将结合定时器（ setTimeout / setInterval ）来控制烟花升空过程，并实现光迹效果与延迟触发机制，敬请期待。
5. 烟花发射与上升动画实现（setInterval/setTimeout）
在烟花动画中，升空阶段是整个视觉流程的起点，其表现直接影响后续爆炸效果的节奏与观感。虽然现代前端动画推荐使用 requestAnimationFrame （RAF）来实现高性能的动画循环，但在某些场景下，如定时启动、延迟触发等逻辑控制， setTimeout 和 setInterval 依然具有不可替代的优势。
本章将围绕烟花升空的实现机制，深入探讨如何使用 setTimeout 和 setInterval 实现发射、上升、顶点判断等关键阶段，并结合 CSS transition 提升动画的视觉流畅性，构建一套稳定且具有节奏感的升空行为链。
2.1 烟花发射的触发机制
烟花升空通常需要一个“引信延迟”阶段，模拟现实中的点燃过程。我们可以使用 setTimeout 来实现这一阶段的延迟触发。
2.1.1 使用 setTimeout 实现发射延迟
function launchFirework() {
const firework = document.createElement('div');
firework.classList.add('firework');
document.body.appendChild(firework);
// 模拟引信点燃后的延迟发射
setTimeout(() => {
startRising(firework);
}, 1000); // 延迟1秒后开始上升
}
代码逻辑分析：
-
launchFirework()创建一个表示烟花的 DOM 元素，并添加到页面中。 - 使用
setTimeout(fn, 1000)设置一个 1 秒延迟，模拟点燃引信的过程。 - 在延迟结束后调用
startRising()开始上升动画。
参数说明：
-
fn：延迟执行的回调函数。 -
1000：延迟时间，单位为毫秒。
2.1.2 安全清除定时器防止内存泄漏
如果用户频繁点击触发烟花，可能产生多个定时器。为了避免内存泄漏，应引入变量保存定时器 ID 并及时清除。
let launchTimeout = null;
function launchFirework() {
if (launchTimeout) clearTimeout(launchTimeout);
const firework = document.createElement('div');
firework.classList.add('firework');
document.body.appendChild(firework);
launchTimeout = setTimeout(() => {
startRising(firework);
}, 1000);
}
优化说明：
- 引入
launchTimeout变量保存定时器 ID。 - 每次调用
launchFirework()前先检查并清除之前的定时器。
2.2 烟花上升动画的实现
烟花升空阶段通常需要一个持续动画效果，模拟其从地面飞向空中的过程。我们可以使用 setInterval 来控制每帧的位置更新，也可以结合 CSS transition 来实现平滑动画。
2.2.1 使用 setInterval 控制上升动画
function startRising(firework) {
let startY = window.innerHeight;
let currentY = startY;
const targetY = window.innerHeight * 0.3;
const duration = 1000; // 总上升时间（ms）
const fps = 60;
const step = (startY - targetY) / (duration / (1000 / fps));
let interval = setInterval(() => {
currentY -= step;
firework.style.bottom = `${currentY}px`;
if (currentY <= targetY) {
clearInterval(interval);
explodeFirework(firework);
}
}, 1000 / fps);
}
代码逻辑分析：
-
startY：初始位置（屏幕底部）。 -
targetY：烟花升空的目标位置（屏幕上方 30%）。 -
step：每一帧移动的距离。 -
setInterval每帧更新bottom样式属性，实现向上移动。 - 当
currentY <= targetY时，清除定时器并进入爆炸阶段。
参数说明：
-
1000 / fps：每帧时间间隔，控制动画帧率。 -
clearInterval(interval)：当到达目标位置后清除定时器，避免无限执行。
2.2.2 使用 CSS transition 实现平滑上升
除了手动控制每一帧的位置更新，我们还可以利用 CSS 的 transition 实现更简洁的动画控制。
function startRisingWithCSS(firework) {
firework.style.transition = 'bottom 1s ease-in';
firework.style.bottom = `${window.innerHeight * 0.3}px`;
// 监听 transition 结束事件
firework.addEventListener('transitionend', () => {
explodeFirework(firework);
});
}
优势说明：
- 更加简洁，无需手动计算每一帧位置。
- 利用浏览器原生动画引擎，性能更优。
- 可以通过
transitionend事件监听动画结束。
2.3 烟花升空状态管理与顶点判断
在实际动画中，烟花升空过程中可能需要动态判断其是否到达“顶点”，以触发爆炸。我们可以通过位置比较或时间判断来实现。
2.3.1 通过位置判断烟花是否到达顶点
function isAtApex(currentY, targetY) {
return currentY <= targetY;
}
使用场景：
- 在
setInterval循环中调用此函数判断是否到达目标位置。
2.3.2 通过时间判断烟花是否到达顶点
function startRisingWithDuration(firework) {
const startTime = performance.now();
const duration = 1000;
const interval = setInterval(() => {
const now = performance.now();
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
const currentY = window.innerHeight - (window.innerHeight * 0.7) * progress;
firework.style.bottom = `${currentY}px`;
if (progress === 1) {
clearInterval(interval);
explodeFirework(firework);
}
}, 1000 / 60);
}
代码逻辑分析：
- 使用
performance.now()获取精确时间戳。 - 通过
elapsed计算当前动画进度。 - 根据进度更新
bottom样式，实现匀速上升。 - 当
progress === 1时，动画完成，进入爆炸阶段。
2.4 定时器管理与动画链的构建
烟花动画通常包含多个阶段（升空 → 爆炸 → 消散），我们可以通过 setTimeout 和 setInterval 构建清晰的动画行为链。
2.4.1 使用 setTimeout 构建阶段链
function launchFireworkChain() {
const firework = document.createElement('div');
firework.classList.add('firework');
document.body.appendChild(firework);
// 阶段1：延迟点燃
setTimeout(() => {
// 阶段2：升空
startRisingWithDuration(firework);
}, 500);
// 阶段3：爆炸（在 startRising 中已绑定）
}
设计说明：
- 每个阶段使用
setTimeout延迟触发下一个阶段。 - 动画阶段之间通过回调或事件绑定实现顺序执行。
2.4.2 多烟花并发控制
当用户快速连续点击时，可能触发多个烟花。为了防止定时器冲突或内存泄漏，我们需要引入并发控制机制。
const activeTimers = [];
function launchFireworkWithCleanup() {
activeTimers.forEach(timer => clearTimeout(timer));
activeTimers.length = 0;
const firework = document.createElement('div');
firework.classList.add('firework');
document.body.appendChild(firework);
const timer = setTimeout(() => {
startRisingWithDuration(firework);
}, 500);
activeTimers.push(timer);
}
控制逻辑：
- 每次调用前清空所有活跃定时器。
- 使用
activeTimers数组管理定时器 ID。 - 防止多个定时器同时运行，确保动画流程可控。
2.5 性能与优化建议
虽然 setTimeout 和 setInterval 简单易用，但使用不当可能导致性能问题或资源泄漏。以下是一些优化建议。
2.5.1 减少 DOM 操作频率
频繁操作 DOM 会导致页面重排重绘，影响性能。可以使用批处理或使用 requestAnimationFrame 替代。
function startRisingWithRAF(firework) {
let startY = window.innerHeight;
let currentY = startY;
const targetY = window.innerHeight * 0.3;
const duration = 1000;
const startTime = performance.now();
function animate(now) {
const elapsed = now - startTime;
const progress = Math.min(elapsed / duration, 1);
currentY = startY - (startY - targetY) * progress;
firework.style.bottom = `${currentY}px`;
if (progress < 1) {
requestAnimationFrame(animate);
} else {
explodeFirework(firework);
}
}
requestAnimationFrame(animate);
}
优化优势：
- 利用
requestAnimationFrame同步浏览器重绘周期。 - 减少不必要的 DOM 操作，提升性能。
2.5.2 使用对象池回收 DOM 元素
频繁创建和销毁 DOM 元素会造成性能损耗，可以使用对象池进行复用。
const fireworkPool = [];
function getFireworkElement() {
if (fireworkPool.length) {
return fireworkPool.pop();
}
const firework = document.createElement('div');
firework.classList.add('firework');
document.body.appendChild(firework);
return firework;
}
function releaseFireworkElement(firework) {
firework.style.bottom = '0px';
fireworkPool.push(firework);
}
使用说明：
-
getFireworkElement()优先从对象池中获取元素。 -
releaseFireworkElement()在动画结束后将元素放回池中。
2.6 技术对比与适用场景
| 技术方案 | 优点 | 缺点 | 适用场景 |
|---|---|---|---|
setTimeout | 简单易用，适合延迟触发 | 时间精度有限，不适合高频动画 | 引信延迟、定时启动 |
setInterval | 可控性强，适合帧更新 | 容易造成帧率不稳定，需手动管理清除 | 上升动画、状态控制 |
CSS transition | 平滑、性能好，原生支持 | 不灵活，无法实时控制动画状态 | 升空动画、简单位移动画 |
requestAnimationFrame | 高性能，与浏览器刷新率同步 | 不适合非帧驱动逻辑，如延迟触发 | 爆炸动画、粒子系统等复杂动画控制 |
2.7 小结
本章通过 setTimeout 和 setInterval 实现了烟花升空动画的核心逻辑，包括：
- 发射延迟控制
- 上升动画的帧更新
- 顶点判断机制
- 动画链的构建
- 定时器管理与并发控制
- 性能优化与对象池复用
虽然 requestAnimationFrame 是更优的动画方案，但在特定阶段，如引信延迟和状态触发中， setTimeout 和 setInterval 依然具有不可替代的作用。合理使用它们，可以构建出节奏感强、逻辑清晰的烟花升空动画。
6. 爆炸效果与多碎片散开轨迹设计
在现代网页动画中，烟花的视觉冲击力主要来源于其爆炸瞬间所展现出的复杂粒子运动与色彩层次。本章节将深入剖析如何通过JavaScript与CSS协同控制，实现一个逼真且高性能的爆炸效果。重点聚焦于 爆炸触发机制的设计逻辑、碎片粒子群的生成策略、运动轨迹的几何建模方法 以及 视觉层级优化技术 ，从而构建出既符合物理直觉又具备艺术美感的动态表现。
整个过程并非简单的“散开”动作模拟，而是涉及状态管理、向量计算、坐标变换和渲染性能调优等多个层面的综合工程问题。尤其在高并发粒子绘制场景下，必须兼顾帧率稳定性和内存占用效率，这就要求开发者对浏览器的重排重绘机制有深刻理解，并采用GPU友好的样式更新方式。
6.1 爆炸触发条件判定逻辑
烟花动画的真实感很大程度上依赖于“恰当时机”的爆炸行为。过早或过晚都会破坏用户的沉浸体验。因此，建立一套可靠的 爆炸触发判断系统 至关重要。该系统需要结合空间位置（高度）与时间两个维度进行决策，同时引入有限状态机来清晰地划分生命周期阶段。
6.1.1 高度阈值检测与时间延迟双重判断机制
为了确保烟花在空中达到预定高度后才发生爆炸，可以设置一个基于视口单位的 垂直位置阈值 。例如，当烟花上升至距离页面顶部小于 20vh 时，认为已接近顶点；与此同时，还需配合一个最小上升时间（如800ms），防止因初始速度过快导致提前引爆。
这种双条件判断机制提升了系统的鲁棒性：
- 仅用高度判断 ：容易受到初速度异常或随机扰动影响；
- 仅用时间判断 ：无法适应不同发射路径的速度变化；
- 二者结合 ：既能保证基本的时间节奏，又能根据实际位置做出动态响应。
class Firework {
constructor(x, y, targetY) {
this.x = x;
this.y = y;
this.targetY = targetY; // 目标爆炸高度（px）
this.startTime = Date.now();
this.minRiseTime = 800; // 最短上升时间（ms）
this.state = 'launching'; // 可选: launching, rising, exploded
}
update() {
// 模拟上升逻辑...
if (this.y <= this.targetY &&
Date.now() - this.startTime > this.minRiseTime &&
this.state === 'rising') {
this.explode();
}
}
explode() {
this.state = 'exploded';
console.log('💥 烟花在', this.x, this.y, '处爆炸！');
// 触发粒子生成等后续操作
}
}
🔍 代码逻辑逐行解读：
| 行号 | 解释 |
|---|---|
| 3–7 | 初始化烟花对象的位置、目标爆炸高度、启动时间及初始状态 |
| 9–14 | update() 方法每帧调用一次，用于检查是否满足爆炸条件 |
| 10 | 更新当前烟花位置（未展示具体位移逻辑，由外部驱动） |
| 11–13 | 判断三个关键条件： ① 当前Y坐标 ≤ 目标高度 ② 已运行时间超过最短上升时间 ③ 当前处于上升状态 |
| 15–18 | 满足条件则切换状态并执行 explode() 方法 |
此设计允许灵活扩展更多触发条件，比如添加音效同步标记或用户交互事件联动。
此外，可通过配置参数表进一步提升可维护性：
| 参数名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
targetY | number | window.innerHeight * 0.2 | 爆炸触发高度（像素） |
minRiseTime | number | 800 | 最小上升时间（毫秒） |
maxRiseTime | number | 1500 | 超时自动爆炸上限 |
tolerance | number | 20 | 高度容差范围（px），避免浮点误差误判 |
这些参数均可从外部注入，支持主题化配置或动态调整难度等级。
stateDiagram-v2
[*] --> Launching
Launching --> Rising : 发射指令发出
Rising --> Exploding : 达到高度 && 时间达标
Rising --> Exploding : 超时强制爆炸
Exploding --> Fading : 所有粒子透明度归零
Fading --> [*] : 清理DOM节点
上述 Mermaid 流程图 展示了烟花从发射到消亡的完整状态流转路径。使用状态机模式有助于隔离各阶段的行为逻辑，避免条件嵌套失控，也便于后期调试与日志追踪。
6.1.2 状态机管理烟花生命周期（上升→爆炸→消散）
在复杂的动画系统中，直接使用布尔标志（如 isExploded ）极易引发状态混乱。取而代之的是采用 有限状态机（Finite State Machine, FSM） 对每个烟花实例的状态进行统一管理。
每个烟花应具备以下核心状态：
| 状态 | 描述 | 典型行为 |
|---|---|---|
idle | 初始空闲状态 | 不参与任何更新 |
launching | 引信点燃，准备升空 | 启动定时器或播放光迹动画 |
rising | 正在向上飞行 | 更新位置，监听爆炸条件 |
exploded | 爆炸完成，碎片飞散 | 创建粒子群，启动衰减循环 |
fading | 粒子逐渐消失 | 降低 opacity，监测销毁时机 |
dead | 已清理资源 | 从活动列表中移除 |
状态迁移规则需严格定义，禁止非法跳转（如从 rising 直接到 fading ）。为此可封装一个通用的状态控制器：
class StateMachine {
constructor(initialState) {
this.currentState = initialState;
this.transitions = new Map();
}
addTransition(from, to, guardFn) {
const key = `${from}->${to}`;
this.transitions.set(key, guardFn || (() => true));
}
canTransition(to) {
const key = `${this.currentState}->${to}`;
return this.transitions.has(key) && this.transitions.get(key)();
}
transition(to) {
if (this.canTransition(to)) {
this.currentState = to;
return true;
}
return false;
}
}
📌 参数说明与逻辑分析：
-
addTransition(from, to, guardFn)：注册状态转移规则，guardFn是守卫函数，返回布尔值决定是否允许转移。 -
canTransition(to)：检查能否进入目标状态。 -
transition(to)：执行合法的状态变更。
应用示例：
const fw = new Firework(...);
const fsm = new StateMachine('rising');
fsm.addTransition('rising', 'exploded', () => {
return fw.y <= fw.targetY && Date.now() - fw.startTime > fw.minRiseTime;
});
// 在主循环中：
if (fsm.currentState === 'rising') {
fw.updatePosition();
if (fsm.canTransition('exploded')) {
fsm.transition('exploded');
fw.generateParticles(); // 开始爆炸
}
}
这种方式使得状态逻辑集中可控，未来若需增加“二次爆炸”、“延迟绽放”等功能，只需扩展状态图即可，无需重构原有代码。
6.2 碎片粒子群的生成与初始化
爆炸的本质是能量释放导致物质高速扩散。在前端实现中，表现为创建大量小型DOM元素或Canvas绘制点，并赋予它们不同的初速度与方向，形成向外辐射的视觉效果。
6.2.1 创建粒子数组并分配初始速度向量
一旦爆炸被触发，系统需立即生成一组粒子对象，存储于数组中以便后续统一更新。每个粒子应包含基本属性如位置、速度、颜色、大小、存活时间等。
function createExplosionParticles(centerX, centerY, count = 60) {
const particles = [];
const baseSpeed = 5; // 基础初速度（px/ms）
for (let i = 0; i < count; i++) {
const angle = Math.random() * Math.PI * 2; // 随机角度 [0, 2π]
const speed = baseSpeed * (0.7 + Math.random() * 0.6); // 速度浮动区间
particles.push({
x: centerX,
y: centerY,
vx: Math.cos(angle) * speed,
vy: Math.sin(angle) * speed,
radius: 2 + Math.random() * 3, // 2~5px
color: `hsl(${Math.random() * 60 + 10}, 80%, 60%)`, // 橙红色系
opacity: 1,
life: 1.0, // 生命周期归一化 [0,1]
decayRate: 0.015 + Math.random() * 0.01 // 消失速率差异
});
}
return particles;
}
💡 代码逐行解析：
| 行 | 功能说明 |
|---|---|
| 1 | 定义函数，接收中心坐标和粒子数量，默认60个 |
| 3 | 设定基础速度为5px/帧（假设60fps ≈ 16.7ms/frame） |
| 5–17 | 循环生成指定数量的粒子对象 |
| 7 | 使用 Math.random() * 2 * PI 实现全向角分布 |
| 9 | speed 在 0.7~1.3 × baseSpeed 之间浮动，增强自然感 |
| 11–16 | 分解速度向量为 vx , vy ，并初始化其他视觉属性 |
| 14 | HSL色相限定在橙红区域（10°~70°），贴近真实烟火色调 |
该函数返回一个结构化的粒子集合，可用于后续动画驱动。
6.2.2 利用极坐标均匀分布发射方向
为了让碎片呈 球形扩散 而非集中在某些方向，必须确保角度采样在整个圆周上均匀分布。虽然 Math.random() 提供伪随机数，但若不做处理可能出现聚簇现象。
更优方案是使用 极坐标法 + 黄金分割序列（Golden Ratio Sequence） 或 菲波那契螺旋分布（Fibonacci Spiral） 来实现准均匀分布：
function createUniformParticles(centerX, centerY, count = 50) {
const particles = [];
const phi = Math.PI * (3 - Math.sqrt(5)); // 黄金角 ~2.39996 rad
for (let i = 0; i < count; i++) {
const theta = phi * i; // 每次旋转黄金角
const speed = 4 + Math.random() * 3;
particles.push({
x: centerX,
y: centerY,
vx: Math.cos(theta) * speed,
vy: Math.sin(theta) * speed,
radius: 2 + Math.random() * 2,
color: `hsl(${20 + Math.random() * 40}, 90%, 65%)`,
opacity: 1,
life: 1,
decayRate: 0.01 + Math.random() * 0.012
});
}
return particles;
}
✅ 优势对比：
| 方法 | 分布质量 | 性能 | 是否推荐 |
|---|---|---|---|
Math.random() 角度 | 中等，偶见聚集 | 高 | ⚠️ 一般用途 |
| 黄金角递增 | 极佳，近乎完美均匀 | 高 | ✅ 推荐用于高质量爆炸 |
| 预设极角数组 | 可控但不够灵活 | 中 | ❌ 适用于固定图案 |
黄金角方法利用无理数特性避免周期性重复，适合实时生成高质量分布。
6.3 运动轨迹的几何建模
爆炸后的粒子并非简单直线飞出，真实世界中常伴随空气阻力、重力偏移甚至风力扰动。通过对运动轨迹进行数学建模，可大幅提升视觉真实度。
6.3.1 直线匀速运动与曲线扩散路径对比
最简模型为 匀速直线运动 ，即每帧按初始速度方向平移：
particle.x += particle.vx;
particle.y += particle.vy;
优点是计算快、资源消耗低，适合低端设备或大规模粒子系统。缺点是缺乏动感，看起来像“喷射器”。
进阶做法是加入 加速度模型 ，使轨迹呈抛物线或指数衰减曲线：
// 每帧更新
particle.vx *= 0.98; // 空气阻力减速
particle.vy *= 0.98;
particle.vy += 0.08; // 模拟微弱重力向下拉
particle.x += particle.vx;
particle.y += particle.vy;
这样粒子会先快速外扩，随后速度下降并略微下沉，模仿真实烟尘飘散。
我们可以通过表格比较两种模式：
| 特性 | 匀速直线 | 曲线衰减 |
|---|---|---|
| 计算复杂度 | ⭐⭐⭐⭐⭐（极低） | ⭐⭐⭐☆☆（中等） |
| 视觉真实感 | ⭐⭐☆☆☆（机械） | ⭐⭐⭐⭐☆（自然） |
| 内存占用 | 相同 | 略高（需保存加速度） |
| 适用场景 | 移动端轻量特效 | PC端高质量展示 |
6.3.2 添加噪声扰动提升视觉真实感
为进一步打破规则性，可在轨迹中引入 Perlin噪声 或简单正弦扰动，使粒子路径产生轻微抖动：
const NOISE_SCALE = 0.005;
function applyNoise(particle, frameCount) {
const noiseX = Math.sin(frameCount * 0.01 + particle.x * NOISE_SCALE) * 0.4;
const noiseY = Math.cos(frameCount * 0.01 + particle.y * NOISE_SCALE) * 0.4;
particle.x += particle.vx + noiseX;
particle.y += particle.vy + noiseY;
}
注意：噪声幅度不宜过大，否则会掩盖主运动趋势。建议控制在
0.2~0.6px/帧范围内。
也可借助 CSS filter: blur() 与 transform: skew() 模拟空气扭曲感，但需权衡性能开销。
graph TD
A[爆炸中心] --> B[生成N个粒子]
B --> C{是否启用噪声?}
C -->|是| D[叠加Perlin/Simplex噪声]
C -->|否| E[仅使用基础速度]
D --> F[每帧更新位置+衰减]
E --> F
F --> G[透明度渐变]
G --> H[判断生命周期结束]
H --> I[回收DOM节点]
该流程图展示了粒子从诞生到消亡的全流程控制逻辑，强调模块化与可配置性。
6.4 视觉层次与Z轴排序优化
即使运动逻辑正确，若渲染顺序不当，仍会出现“近物被远物遮挡”的错觉，严重影响立体感。因此必须对粒子的 Z轴层级 进行合理调度。
6.4.1 CSS z-index动态调整显示层级
通常情况下，越靠近观察者的物体应具有更高的 z-index 。但由于所有粒子在同一平面，无法直接获取深度信息。一种替代方案是根据粒子距屏幕中心的距离或Y坐标反向映射：
.particle {
position: absolute;
pointer-events: none;
transform: translate(-50%, -50%);
background-color: var(--color);
border-radius: 50%;
opacity: var(--opacity);
transition: none;
}
function updateParticleStyle(el, particle) {
el.style.left = `${particle.x}px`;
el.style.top = `${particle.y}px`;
el.style.width = `${particle.radius * 2}px`;
el.style.height = `${particle.radius * 2}px`;
el.style.setProperty('--color', particle.color);
el.style.setProperty('--opacity', particle.opacity);
// 根据Y坐标设置层级：越往上（数值小）越靠前
const zIndex = Math.floor(100 - particle.y / 10);
el.style.zIndex = zIndex;
}
此方法利用 Y坐标越小表示越高空 → 应前置显示 的心理预期，实现伪3D排序。
6.4.2 透明度渐变与缩放营造远近感
除了 z-index ，还可结合以下手段增强纵深体验：
- Opacity淡出 ：粒子随生命周期递减透明度，模拟远处模糊；
- Scale缩小 ：起始稍大，随后缓慢缩小，暗示远离视角；
- Color褪色 ：从亮彩渐变为灰白，强化消散印象。
// 每帧更新视觉属性
particle.opacity = particle.life;
particle.radius *= 0.99; // 缓慢收缩
el.style.opacity = particle.opacity;
el.style.transform = `translate(-50%, -50%) scale(${1 + particle.radius / 5})`;
最终效果呈现出强烈的“由近及远、由实转虚”的视觉流动感，极大提升了整体沉浸度。
| 技术手段 | 实现方式 | 效果贡献 |
|---|---|---|
z-index 映射 | 基于Y坐标计算 | 防止遮挡错误 |
| Opacity渐变 | life → opacity | 表达时间流逝 |
| Scale缩放 | radius 动态调整 | 强化距离感知 |
| Color褪色 | HSL亮度下降 | 提升美学完整性 |
综上所述，爆炸效果不仅是“动起来”，更是“怎么动得像”。通过科学建模与细致渲染，才能打造出令人惊叹的数字烟火奇观。
7. 重力模拟与运动衰减效果编程
7.1 物理引擎基础概念引入
在实现逼真的烟花爆炸效果时，仅靠匀速直线运动无法还原自然的视觉体验。真实世界中的碎片在空中飞散后会受到地球引力作用而下坠，并伴随空气阻力逐渐减速直至消失。因此，引入基本的物理模型是提升动画真实感的关键一步。
7.1.1 加速度、速度与位移的关系推导
在经典力学中，物体的运动状态由其位置、速度和加速度共同决定。三者之间的关系可通过微分方程描述：
\begin{align }
a(t) &= \frac{dv}{dt} \
v(t) &= \frac{dx}{dt}
\end{align }
在离散帧更新系统中（如每帧约16.6ms），我们采用欧拉积分法近似计算下一时刻的状态：
// 每帧更新逻辑伪代码
particle.velocity.y += particle.acceleration.y * deltaTime;
particle.position.y += particle.velocity.y * deltaTime;
其中 deltaTime 是两帧之间的时间差（通常为 16.67ms ≈ 1/60s ），用于确保动画在不同设备上保持时间一致性。
7.1.2 模拟重力常数g在像素坐标系下的取值
由于浏览器坐标系Y轴向下为正方向，重力加速度应为正值。但为了符合直觉，我们将“向下加速”表示为正向变化。
| 参数 | 含义 | 推荐取值（px/s²） |
|---|---|---|
g | 重力加速度 | 980 |
scaleFactor | 像素与物理单位映射比例 | 1 px = 1 cm |
dt | 时间步长（秒） | 0.0167 (60fps) |
实际应用中，考虑到性能与视觉平衡，常用简化值：
const GRAVITY = 0.5; // px/frame²，适用于60fps
该值可在配置对象中参数化，便于调试不同风格效果。
7.2 粒子动力学更新算法
7.2.1 每帧更新速度与位置的核心循环
每个粒子需维护以下动态属性：
class Particle {
constructor(x, y) {
this.x = x;
this.y = y;
this.vx = Math.random() * 6 - 3; // 初始水平速度 [-3,3]
this.vy = Math.random() * -5 - 2; // 初始上升速度（负值）
this.ax = 0;
this.ay = 0.2; // 每帧增加的垂直加速度（模拟重力）
this.opacity = 1;
this.decay = Math.random() * 0.01 + 0.005; // 衰减速率
this.element = document.createElement('div');
this.element.classList.add('firework-particle');
document.body.appendChild(this.element);
}
update() {
// 更新速度：v = v + a * t (t=1 frame)
this.vy += this.ay;
// 更新位置
this.x += this.vx;
this.y += this.vy;
// 衰减透明度
this.opacity -= this.decay;
// 应用到DOM
this.element.style.transform = `translate3d(${this.x}px, ${this.y}px, 0)`;
this.element.style.opacity = this.opacity;
return this.opacity > 0; // 是否仍存活
}
}
执行逻辑说明 ：
-update()方法被主动画循环调用（通过requestAnimationFrame）
- 返回布尔值指示是否继续保留该粒子
- 使用translate3d触发GPU加速，避免重排
7.2.2 引入空气阻力实现减速衰减
为进一步增强真实感，可添加与速度成正比的空气阻力：
// 在 update 中加入阻尼逻辑
const drag = 0.95; // 阻力系数（每次乘以小于1的数）
this.vx *= drag;
this.vy *= drag;
或者更精确地使用平方关系：
const speed = Math.sqrt(this.vx ** 2 + this.vy ** 2);
if (speed > 0) {
const friction = 0.01;
this.vx -= this.vx / speed * friction;
this.vy -= this.vy / speed * friction;
}
这使得高速粒子更快减速，符合流体动力学规律。
7.3 消失机制与资源回收
7.3.1 判断粒子是否完全消失（opacity ≤ 0）
在主循环中检测返回值并清理：
let particles = [];
function animate() {
particles = particles.filter(p => p.update());
if (particles.length > 0) requestAnimationFrame(animate);
}
// 发射新烟花时
function explode(x, y) {
for (let i = 0; i < 100; i++) {
particles.push(new Particle(x, y));
}
if (particles.length === 100) requestAnimationFrame(animate);
}
7.3.2 从活动列表中移除并释放DOM节点
及时销毁 DOM 元素防止内存泄漏：
class Particle {
// ...
update() {
// ... 位置更新逻辑
if (this.opacity <= 0) {
document.body.removeChild(this.element); // 释放节点
return false;
}
return true;
}
}
也可使用文档片段或 hidden 状态复用节点以提升性能。
7.4 性能监控与优化建议
7.4.1 控制最大并发粒子数防止卡顿
设置上限并通过LRU策略淘汰旧粒子：
const MAX_PARTICLES = 500;
function createParticle(x, y) {
if (particles.length >= MAX_PARTICLES) {
const old = particles.shift();
if (old && old.element) {
document.body.removeChild(old.element);
}
}
particles.push(new Particle(x, y));
}
7.4.2 使用requestIdleCallback进行低优先级清理任务
对于非关键清理工作，可利用空闲周期执行：
let cleanupQueue = [];
function scheduleCleanup(task) {
cleanupQueue.push(task);
requestIdleCallback(processCleanupQueue);
}
function processCleanupQueue(deadline) {
while (deadline.timeRemaining() > 1 && cleanupQueue.length > 0) {
const task = cleanupQueue.pop();
task();
}
}
结合 PerformanceObserver 可实时监测帧率波动，动态调整粒子数量。
graph TD
A[开始帧更新] --> B{遍历所有粒子}
B --> C[应用重力加速度]
C --> D[更新速度与位置]
D --> E[施加空气阻力]
E --> F[降低透明度]
F --> G{opacity > 0?}
G -- 是 --> H[更新DOM样式]
G -- 否 --> I[移除DOM节点并过滤出数组]
I --> J[触发资源回收]
H --> K[进入下一帧]
简介：HTML和JavaScript是网页开发的核心技术，结合使用可实现生动的动态视觉效果。本文介绍的烟花特效脚本基于HTML构建页面结构，利用JavaScript控制动画逻辑，实现烟花发射、爆炸、散落及音效同步等完整过程。通过坐标定位、随机颜色生成、重力模拟和事件交互等技术，为用户提供沉浸式视觉体验。该特效还涵盖性能优化策略，适合用于节日页面、互动活动或前端学习实践。
扫一扫
1887
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
