Fireworks

HoverToc.js

简介

• 基于 [fireworks-js](https://fireworks.js.org/) 库实现的烟花特效，支持自定义配置。
  • 注：使用深色背景效果更佳

安装

• https://wiki.biligame.com/你管理的BWIKI/Widget:Fireworks
• 示例：Widget:Fireworks

<includeonly><style type="text/css">
    .fireworks {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        pointer-events: none;
        user-select: none;
        z-index: 99999; /* 置于页面背后则改为-1 */
    }
</style>
<script type="text/javascript" src="https://wiki.biligame.com/tools/index.php?title=MediaWiki:Fireworks.js&action=raw&ctype=text/javascript"></script>
<script type="text/javascript">
    var fireworksDiv = document.createElement('div');
    fireworksDiv.className = 'fireworks';
    document.body.appendChild(fireworksDiv);
    const container = document.querySelector('.fireworks');
    const fireworks = new Fireworks.default(container);
    fireworks.start();
</script></includeonly><noinclude>{{#widget:Fireworks}}</noinclude>

使用

对应页面输入

{{#widget:Fireworks}}

扩展应用-更改烟花效果

可前往 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)
  • 注：bwiki平台暂不支持

使用示例

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

• 使用自定义参数

<script type="text/javascript">
    var fireworksDiv = document.createElement('div');
    fireworksDiv.className = 'fireworks';
    document.body.appendChild(fireworksDiv);
    const container = document.querySelector('.fireworks');
    // 烟花配置
    const fireworks = new Fireworks.default(container, {
        // 核心参数
        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方形
        // 声音效果
        sound: {
            enabled: false        // 是否启用声音效果
        },
        // 颜色
        hue: {
            min: 0,                // 色相最小值（0-360）
            max: 360               // 色相最大值（0-360）
        },
        // 发射与延迟
        delay: {
            min: 100,              // 最小发射延迟（官方默认: 30ms）
            max: 200               // 最大发射延迟（官方默认: 60ms）
        },
        // 发射位置和边界（可选，用于限制烟花范围）
        rocketsPoint: {
            min: 0,               // 发射位置最小X坐标
            max: 100              // 发射位置最大X坐标
        },
        boundaries: {
            x: 0,                 // 边界左上角X坐标
            y: 0,                 // 边界左上角Y坐标
            width: window.innerWidth,   // 边界宽度
            height: window.innerHeight  // 边界高度
        },
        // 线条宽度
        lineWidth: {
            explosion: {
                min: 1,            // 爆炸粒子最小宽度
                max: 2             // 爆炸粒子最大宽度（官方默认: 3）
            },
            trace: {
                min: 0.5,          // 上升轨迹最小宽度（官方默认: 1）
                max: 1             // 上升轨迹最大宽度（官方默认: 2）
            }
        },
        // 亮度
        brightness: {
            min: 60,               // 亮度最小值（官方默认: 50）
            max: 90                // 亮度最大值（官方默认: 80）
        },
        // 衰减效果
        decay: {
            min: 0.010,           // 最小衰减速度（官方默认: 0.015）
            max: 0.015            // 最大衰减速度（官方默认: 0.03）
        },
        // 鼠标交互
        mouse: {
            click: false,          // 是否允许点击触发（官方默认: false）
            move: false,          // 是否允许鼠标移动触发
            max: 1                // 同时触发数量（官方默认: 3）
        }
    });
    fireworks.start();
</script>

• 页面效果 Widget:Fireworks/1

其他示例

• lysk/widget:fireworks