3步打造惊艳网页烟花效果：Fireworks.js视觉增强完全指南

Fireworks.js是一款轻量级前端动效库，基于Canvas技术实现绚丽烟花效果，支持React、Vue、Angular等主流框架，仅需简单配置即可为网页添加专业级动态视觉体验，让静态页面瞬间焕发活力。

快速上手：从零开始的烟花效果实现

1️⃣ 引入核心库

通过npm安装或CDN直接引入：

npm install fireworks-js

或

<script src="https://cdn.jsdelivr.net/npm/fireworks-js@latest/dist/fireworks.min.js"></script>

2️⃣ 创建渲染容器

添加全屏容器元素：

<div id="fireworks-container" style="width:100vw; height:100vh;"></div>

3️⃣ 初始化配置

三行代码启动烟花效果：

const container = document.getElementById('fireworks-container')
const fireworks = new Fireworks(container, { maxRockets: 3 })
fireworks.start()

效果定制：参数配置与视觉表现

核心参数解析

通过调整关键参数实现多样化效果：

• hue: 颜色范围控制，支持固定值或区间设置
• particlesPerExplosion: 爆炸粒子数量（50-200）
• gravity: 粒子重力值（0.05-0.2）
• flickering: 粒子闪烁效果（true/false）

三种经典效果配置

// 节日庆典效果
const festivalOptions = {
  particlesPerExplosion: 150,
  hue: { min: 0, max: 360 },
  explosionSize: 12
}

// 浪漫氛围效果
const romanticOptions = {
  brightness: { min: 50, max: 70 },
  gravity: 0.05,
  explosionSize: 8
}

// 科技感效果
const techOptions = {
  hue: { min: 210, max: 210 },
  speed: 5,
  particlesPerExplosion: 80
}

多框架集成方案

React组件使用

import { Fireworks } from 'fireworks-js/react'

function CelebrationPage() {
  return (
    <div className="page">
      <h1>欢迎使用</h1>
      <Fireworks options={{ maxRockets: 2 }} />
    </div>
  )
}

Vue 3组件集成

<template>
  <div class="app">
    <Fireworks :options="options" />
  </div>
</template>

<script setup>
const options = {
  explosionSize: 10,
  hue: { min: 120, max: 240 }
}
</script>

其他框架实现可参考官方示例：examples/

性能优化与设备适配

设备分级配置策略

设备类型	粒子数量	帧率	优化建议
高端设备	150-200	60fps	启用flickering效果
中端设备	80-120	45fps	降低explosionSize至8
低端设备	40-60	30fps	启用autoDestroy: true

实战优化代码

// 设备检测与动态配置
const isMobile = window.innerWidth < 768
const baseOptions = isMobile ? 
  { maxRockets: 1, particlesPerExplosion: 60 } :
  { maxRockets: 3, particlesPerExplosion: 120 }

// 触摸设备优化
if ('ontouchstart' in window) {
  container.addEventListener('touchstart', (e) => {
    const touch = e.touches[0]
    fireworks.launch(touch.clientX, touch.clientY)
  })
}

高级交互与事件监听

交互功能实现

// 点击发射烟花
container.addEventListener('click', (e) => {
  fireworks.launch(e.clientX, e.clientY)
})

// 鼠标跟随效果
container.addEventListener('mousemove', (e) => {
  fireworks.setTarget(e.clientX, e.clientY)
})

事件监听与音效集成

// 爆炸事件监听
fireworks.on('explosion', () => {
  const audio = new Audio('sounds/explosion.mp3')
  audio.play()
})

// 结束事件监听
fireworks.on('end', () => {
  console.log('烟花效果已结束')
})

完整API文档可参考：packages/fireworks-js/src/types.ts

通过本文介绍的方法，你可以轻松掌握Fireworks.js的核心用法和优化技巧。无论是节日庆典、产品发布还是个性化页面，这款强大的动效库都能帮助你打造令人印象深刻的视觉体验。立即尝试，让你的网页绽放独特光彩！