Widget:Fireworks

烟花效果配置说明

基于 [fireworks-js](https://fireworks.js.org/) 库实现的烟花特效，支持丰富的自定义配置。

基础配置参数

核心参数

• autoresize: 是否自动调整大小 (默认: true)
• opacity: 画布不透明度，取值范围 0-1 (默认: 1)
• acceleration: 加速度，值越小上升越慢 (默认: 1.05)
• friction: 摩擦力，影响粒子运动 (默认: 0.97)
• gravity: 重力，值越大下落越快 (默认: 1.5)

粒子效果

• particles: 爆炸后的粒子数量 (默认: 50)
• traceLength: 烟花上升轨迹长度 (默认: 3)
• traceSpeed: 轨迹速度，值越小上升越慢 (默认: 10)
• explosion: 爆炸范围大小 (默认: 5)
• intensity: 爆炸强度 (默认: 30)
• flickering: 闪烁程度，值越小越稳定 (默认: 50)
• lineStyle: 粒子样式，可选 square方形或round圆形 (默认: round)

颜色与亮度

• hue: 颜色色相范围
  • min: 最小值，0-360 (默认: 0)
  • max: 最大值，0-360 (默认: 360)
• brightness: 亮度范围
  • min: 最小值，0-100 (默认: 50)
  • max: 最大值，0-100 (默认: 80)

发射与延迟

• delay: 发射延迟时间
  • min: 最小延迟时间 (默认: 30ms)
  • max: 最大延迟时间 (默认: 60ms)

线条宽度

• lineWidth.explosion: 爆炸粒子线条
  • min: 最小宽度 (默认: 1)
  • max: 最大宽度 (默认: 3)
• lineWidth.trace: 上升轨迹线条
  • min: 最小宽度 (默认: 1)
  • max: 最大宽度 (默认: 2)

衰减效果

• decay: 粒子衰减速度
  • min: 最小衰减速度，值越小效果持续越长 (默认: 0.015)
  • max: 最大衰减速度 (默认: 0.03)

鼠标交互

• mouse.click: 是否允许点击触发 (默认: false)
• mouse.move: 是否允许鼠标移动触发 (默认: false)
• max: 同时允许触发的最大数量 (默认: 3)

声音效果

• sound.enabled: 是否启用声音 (默认: false)

使用示例

const fireworksConfig = {
    // 核心参数
    autoresize: true,          // 自动调整画布大小
    opacity: 0.3,              // 画布不透明度（官方默认: 1）
    acceleration: 1.01,        // 加速度（官方默认: 1.05）
    friction: 0.85,            // 摩擦力（官方默认: 0.97）
    gravity: 1.5,              // 重力，影响下落速度

    // 粒子效果
    particles: 55,             // 爆炸粒子数量（官方默认: 50）
    traceLength: 3,            // 上升轨迹长度
    traceSpeed: 3,             // 上升速度（官方默认: 10）
    explosion: 1,              // 爆炸范围（官方默认: 5）
    intensity: 55,             // 爆炸强度（官方默认: 30）
    flickering: 25,            // 火花闪烁程度（官方默认: 50）
    lineStyle: 'round',        // 粒子形状：round圆形，square方形

    // 颜色与亮度
    hue: {
        min: 0,                // 色相最小值（0-360）
        max: 360               // 色相最大值（0-360）
    },
    brightness: {
        min: 60,               // 亮度最小值（官方默认: 50）
        max: 90                // 亮度最大值（官方默认: 80）
    },

    // 发射与延迟
    delay: {
        min: 100,              // 最小发射延迟（官方默认: 30ms）
        max: 200               // 最大发射延迟（官方默认: 60ms）
    },

    // 线条宽度
    lineWidth: {
        explosion: {
            min: 1,            // 爆炸粒子最小宽度
            max: 2             // 爆炸粒子最大宽度（官方默认: 3）
        },
        trace: {
            min: 0.5,          // 上升轨迹最小宽度（官方默认: 1）
            max: 1             // 上升轨迹最大宽度（官方默认: 2）
        }
    },

    // 衰减效果
    decay: {
        min: 0.010,           // 最小衰减速度（官方默认: 0.015）
        max: 0.015            // 最大衰减速度（官方默认: 0.03）
    },

    // 鼠标交互
    mouse: {
        click: true,          // 是否允许点击触发（官方默认: false）
        move: false,          // 是否允许鼠标移动触发
        max: 1                // 同时触发数量（官方默认: 3）
    },

    // 声音效果
    sound: {
        enabled: false        // 是否启用声音效果
    },

    // 发射位置和边界（可选，用于限制烟花范围）
    rocketsPoint: {
        min: 0,               // 发射位置最小X坐标
        max: 100              // 发射位置最大X坐标
    },
    boundaries: {
        x: 0,                 // 边界左上角X坐标
        y: 0,                 // 边界左上角Y坐标
        width: window.innerWidth,   // 边界宽度
        height: window.innerHeight  // 边界高度
    }
};

// 创建并启动烟花
const container = document.querySelector('.fireworks');
const fireworks = new Fireworks.default(container, fireworksConfig);
fireworks.start();

你可以根据需要调整这些参数来实现不同的烟花效果。较小的重力值会使烟花下落更慢，较大的粒子数量会使爆炸效果更绚丽，调整色相范围可以限制烟花的颜色等。