如何用Fireworks.js打造惊艳网页烟花效果？超简单前端动画库教程 🎇
项目地址: https://gitcode.com/gh_mirrors/fi/fireworks-js Fireworks.js是一个轻量级的烟花效果库，专为前端开发者设计，支持React、Vue、Svelte等主流框架。通过简单配置即可在网页中添加绚丽的烟花动画，无需复杂的Canvas知识，让你的网站瞬间充满节日氛围和互动乐趣。
📌 为什么选择Fireworks.js？5大核心优势
✅ 多框架无缝集成
Fireworks.js提供开箱即用的组件，完美适配现代前端生态：
- React组件：examples/with-react/src/App.tsx
- Vue组件：examples/with-vue/src/App.vue
- Svelte组件：examples/with-svelte/src/App.svelte
- Angular指令：examples/with-angular/src/app/app.component.ts
✅ 零依赖轻量级设计
核心库仅30KB，无任何外部依赖，通过原生Canvas API实现高效渲染。源码结构清晰，主要逻辑位于：
✅ 高度可定制化参数
从粒子颜色到爆炸强度，20+可配置选项满足个性化需求：
{
hue: { min: 0, max: 360 }, // 颜色范围
particles: 50, // 粒子数量
explosion: 5, // 爆炸强度
mouse: { click: true, move: false } // 鼠标交互
}
✅ 响应式自动适配
内置窗口大小监听机制，自动调整画布尺寸，确保在手机、平板和桌面设备上都能完美展示。实现代码：packages/fireworks-js/src/resize.ts
✅ 毫秒级性能优化
采用requestAnimationFrame实现流畅动画，GPU加速渲染，即使同时触发多个烟花效果也不会出现卡顿。性能测试表明，在普通设备上可稳定保持60fps帧率。
🚀 3分钟快速上手：基础安装与使用
1️⃣ 环境准备
确保已安装：
- Node.js 12+
- npm/pnpm/yarn包管理器
2️⃣ 一键安装步骤
# 克隆仓库
git clone https://gitcode.com/gh_mirrors/fi/fireworks-js
# 进入项目目录
cd fireworks-js
# 安装依赖
pnpm install
# 启动示例项目
pnpm dev --filter @fireworks-js/example-basic
3️⃣ 基础HTML使用示例
创建简单HTML文件，引入库后三行代码实现烟花效果：
<canvas id="fireworks"></canvas>
<script type="module">
import { Fireworks } from 'fireworks-js';
const fireworks = new Fireworks(document.getElementById('fireworks'));
fireworks.start(); // 启动烟花动画
</script>
🎨 实战案例：打造你的专属烟花效果
鼠标点击触发效果
通过配置mouse.click: true，实现点击屏幕任意位置绽放烟花：
new Fireworks(container, {
mouse: { click: true, max: 3 }, // 最多同时显示3个烟花
hue: { min: 120, max: 240 }, // 限定青绿色调
explosion: 8 // 增强爆炸效果
});
节日主题定制方案
为国庆、圣诞等特殊节日定制专属效果：
- 国庆主题：红色+黄色粒子组合（hue: {min: 0, max: 60}）
- 圣诞主题：红绿渐变（hue: {min: 0, max: 10}, {min: 100, max: 120}）
- 新年倒计时：配合定时器实现零点集体绽放
使用Fireworks.js创建的节日主题烟花效果，支持自定义颜色和绽放频率
背景音乐同步技巧
结合Web Audio API实现音画同步，让烟花随音乐节奏绽放：
- 加载音频文件：website/public/sounds/explosion0.mp3
- 监听音频峰值：packages/fireworks-js/src/sound.ts
- 峰值触发烟花：将音量峰值映射为爆炸强度
⚙️ 高级配置指南：解锁更多可能性
粒子物理参数调优
通过调整物理参数实现不同视觉效果：
- 轻盈飘散效果：降低gravity（重力）值至0.5
- 密集爆炸效果：增加particles数量至100
- 长尾轨迹效果：增大traceLength至5
性能优化最佳实践
在低端设备上保持流畅体验的技巧：
- 减少同时渲染的烟花数量（intensity: 15）
- 降低粒子数量（particles: 30）
- 关闭flickering效果（flickering: 0）
自定义粒子形状
默认粒子为圆形，通过修改绘制函数可实现星形、方形等自定义形状：
// 源码修改位置：packages/fireworks-js/src/explosion.ts
// 将arc替换为rect实现方形粒子
ctx.fillRect(x, y, size, size);
🛠️ 常见问题解决方案
画布层级问题
当烟花被其他元素遮挡时，调整CSS z-index属性：
#fireworks {
position: fixed;
top: 0;
left: 0;
z-index: 9999; /* 确保位于顶层 */
pointer-events: none; /* 不阻止底层交互 */
}
移动端性能优化
针对触摸设备的特别优化：
new Fireworks(container, {
particles: 20, // 减少粒子数量
traceSpeed: 8, // 降低轨迹绘制速度
delay: { min: 50, max: 100 } // 增加发射间隔
});
与框架路由集成
在SPA应用中防止内存泄漏：
useEffect(() => {
const fireworks = new Fireworks(container);
fireworks.start();
return () => fireworks.stop(); // 组件卸载时停止动画
}, []);
🎁 附赠资源：完整示例项目
Fireworks.js提供7种框架的完整示例，可直接作为项目模板使用：
- 基础HTML示例：examples/basic/
- Preact示例：examples/with-preact/
- Solid示例：examples/with-solid/
- Web Components示例：examples/with-web-components/
Fireworks.js在不同前端框架中的实现效果，动画流畅度一致
📝 总结：让网页动起来的最简单方式
Fireworks.js凭借其易用性和强大功能，成为前端动画效果的理想选择。无论是节日庆典、产品发布还是用户交互反馈，都能通过这些绚烂的烟花效果提升用户体验。
立即尝试这个令人惊艳的动画库，只需3行代码，让你的网页从此告别单调，绽放无限可能！源码地址：packages/fireworks-js/src/
💡 提示：更多高级用法和API文档，请参考项目README.md文件。生产环境使用时建议通过npm安装官方包：
npm install fireworks-js
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
