Fireworks.js 快速上手：打造炫酷网页烟花效果
项目地址: https://gitcode.com/gh_mirrors/fi/fireworks-js 想要为你的网站添加节日氛围或庆祝效果吗？Fireworks.js 是一个轻量级、零依赖的烟花动画库，让你只需几行代码就能实现惊艳的视觉盛宴。这个强大的JavaScript库支持多种前端框架，包括React、Vue 3、Svelte、Angular等，是提升用户体验的绝佳选择。
🎯 快速入门指南
环境准备检查清单
在开始之前，请确保你的开发环境满足以下要求：
✅ Node.js 12+ - 推荐使用最新稳定版本
✅ 包管理器 - npm、yarn 或 pnpm 任选其一
✅ 现代浏览器 - 支持所有主流浏览器
第一步：获取项目源码
git clone https://gitcode.com/gh_mirrors/fi/fireworks-js
第二步：安装项目依赖
根据你使用的包管理器选择相应命令：
# 使用 npm
npm install
# 使用 yarn
yarn install
# 使用 pnpm
pnpm install
第三步：启动开发服务器
npm run start
启动后，你将在浏览器中看到绚丽的烟花效果！🎆
🔥 核心功能特性
Fireworks.js 的核心优势在于其简洁性和灵活性：
零依赖设计
- 🚀 轻量级 - 仅约3.0kB gzipped
- 🛠️ 类型安全 - 完整的TypeScript支持
- 📱 响应式 - 自动适配不同屏幕尺寸
- 🎨 高度可定制 - 丰富的配置选项
⚙️ 配置你的专属烟花秀
Fireworks.js 提供了丰富的配置选项，让你可以完全掌控烟花效果：
import { Fireworks } from 'fireworks-js'
const container = document.querySelector('.fireworks-container')
const fireworks = new Fireworks(container, {
autoresize: true,
opacity: 0.5,
acceleration: 1.05,
friction: 0.97,
gravity: 1.5,
particles: 50,
traceLength: 3,
traceSpeed: 10,
explosion: 5,
intensity: 30,
flickering: 50,
lineStyle: 'round',
hue: { min: 0, max: 360 },
delay: { min: 30, max: 60 },
rocketsPoint: { min: 50, max: 50 },
lineWidth: {
explosion: { min: 1, max: 3 },
trace: { min: 1, max: 2 }
},
brightness: { min: 50, max: 80 },
decay: { min: 0.015, max: 0.03 },
mouse: { click: false, move: false, max: 1 }
})
// 启动烟花
fireworks.start()
主要配置参数说明
- 色彩范围 (hue): 控制烟花颜色，0-360度色相环
- 粒子数量 (particles): 影响爆炸效果的丰富程度
- 轨迹长度 (traceLength): 决定烟花上升轨迹的视觉效果
- 爆炸强度 (explosion): 调整爆炸的规模和持续时间
🎪 多框架支持方案
Fireworks.js 为不同技术栈提供了专门的包：
| 框架 | 包名 | 安装命令 |
|---|---|---|
| React | @fireworks-js/react | npm install @fireworks-js/react |
| Vue 3 | @fireworks-js/vue | npm install @fireworks-js/vue |
| Svelte | @fireworks-js/svelte | npm install @fireworks-js/svelte |
| Angular | @fireworks-js/angular | npm install @fireworks-js/angular |
| Preact | @fireworks-js/preact | npm install @fireworks-js/preact |
| Solid | @fireworks-js/solid | npm install @fireworks-js/solid |
| Web Components | @fireworks-js/web | npm install @fireworks-js/web |
💡 进阶使用技巧
响应式配置
利用 autoresize 选项，烟花效果会自动适应容器尺寸变化：
const fireworks = new Fireworks(container, {
autoresize: true,
// 其他配置...
})
交互式控制
通过API方法实现动态控制：
// 启动/暂停
fireworks.pause()
// 发射指定数量的烟花
fireworks.launch(5)
// 完全停止并清理
fireworks.stop(true)
📊 性能优化建议
为了确保最佳的用户体验，建议：
- 在移动设备上适当减少粒子数量
- 根据场景需要调整爆炸频率
- 使用CSS硬件加速优化渲染性能
🎉 开始你的烟花之旅
现在你已经掌握了Fireworks.js的核心使用方法。无论是为产品发布添加庆祝效果，还是为节日活动营造氛围，这个强大的库都能让你的网页瞬间变得生动有趣。
想要查看更多示例？项目中的 examples目录 包含了各种框架的完整实现，帮助你快速上手！
记住：最好的学习方式就是动手实践。立即开始你的第一个烟花项目，让创意在空中绽放！✨
创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
