Bubbly里的变量怎么使用教程

如果你尝试过在Bubbly气泡背景中动态控制颜色、数量或运动轨迹，可能会发现它不像想象中那么直接——搜遍文档也找不到一个全局变量让你随手修改。原因很简单：Bubbly的设计哲学就是不提供全局API，所有可调参数都封装在 bubbly() 调用时传入的对象中。想要实现动态效果，关键在于理解它的参数传递机制，而非寻找某个隐藏的变量声明入口。

基础启动：用字面量对象替代变量

先看最基础的启动方式。很多人习惯直接写 bubbly();，但这样会完全使用默认参数，后续再想调整就无从下手了。正确的做法是改用对象字面量传参，比如 bubbly({speed: 0.3, count: 80});。这里的 speed 和 count 是对象的键值对，不是独立的变量名——你无法在别处写 speed = 0.5; 就指望气泡变快，必须重新调用 bubbly() 并传入新对象。

如果同一组参数需要多次复用，可以先声明一个常量对象再传入：const bgConfig = {speed: 0.2, count: 60}; bubbly(bgConfig);。有一个容易踩坑的地方：这个对象必须在 bubbly() 调用前定义，否则会报 ReferenceError。

颜色动态化：用函数返回值模拟“活变量”

气泡填充色如果写死成 "#ff6b6b"，所有气泡就会一个颜色，视觉效果会很单调。解决办法是让颜色“活”起来——用函数返回不同值，每次绘制时生成新颜色。

一种思路是利用 Math.random() 生成随机HSLA值。在 bubbles.fill 字段中这样写：fill: () => `hsla(${Math.random() * 30 + 10}, 90%, 70%, ${Math.random() * 0.4 + 0.1})`。每次canvas重绘都会执行这个函数，相当于拥有了一个“运行时变量”。

如果希望气泡颜色按顺序渐变而非完全随机，可以结合闭包来维护状态变量：
let hueOffset = 0; bubbly({bubbles: {fill: () => {hueOffset = (hueOffset + 2) % 360; return `hsla(${hueOffset}, 100%, 60%, 0.3)`;}}});

需要注意的一点：闭包变量 hueOffset 必须在 bubbly() 调用前声明，不能放在 fill 函数内部——否则每次调用都会被重置为0，失去渐变的连续性。

响应式更新：重新调用覆盖旧实例

Bubbly不支持在运行时直接修改参数，唯一的办法是销毁重建。具体来说，需要按三个步骤操作：

第一步，保存初始调用的返回值：const bubbleInstance = bubbly({speed: 0.3});

第二步，当需要更新参数时，先调用 bubbleInstance.destroy() 清除旧canvas。如果不销毁就直接重新调用 bubbly()，会导致两层气泡叠加，视觉效果会变得混乱。

第三步，用新参数重建：bubbleInstance = bubbly({speed: 0.6});

这三步必须严格按顺序执行，中间不能插入DOM操作或异步等待——否则canvas很可能残留或错位。从实际使用来看，这是Bubbly在动态更新方面比较核心的约束，理解了它，就能更好地驾驭这个轻量库。