Bubbly怎么制作跳跃动作特效

先说一个核心结论：Bubbly这个气泡库天生就不支持跳跃动作。它的底层基于 Canvas 物理模拟，所有运动都是随机漂浮、缓慢聚合、边缘反弹，压根没有重力加速度、落地检测、回弹形变这些跳跃必备的参数。所以，如果你想在气泡背景上实现跳跃特效，必须另辟蹊径——用 CSS 动画叠加容器，或者用 JS + DOM 小球单独实现。

说白了，Bubbly 只擅长做流体式的动画，比如浮动、飘散、淡入。位移类的弹跳（比如 translateY 或 bounce 关键帧），它根本管不了。跳跃动作只能作为独立图层，叠在 Bubbly canvas 的上方。

为什么Bubbly不能直接做跳跃

要理解这一点，得先看看 Bubbly 的底层机制。它基于 canvas 逐帧绘制气泡位置，所有运动都由内部物理模拟驱动——气泡只会随机漂浮、缓慢聚合/散开、在边缘反弹。注意，这里没有垂直方向的重力加速度，也没有落地检测和回弹形变。强行修改源码来注入 bounce 逻辑，结果就是气泡轨迹错乱、性能骤降，而且 v1.0.0 根本没开放运动引擎 API。

所以，跳跃动作只能作为独立图层，覆盖在 Bubbly canvas 上方。这是最稳的做法。

用CSS动画给气泡容器加跳跃动效

这个方法适用于想让整个气泡背景“微微弹跳”的场景——比如页面加载时来一次轻跃，或者随用户滚动触发节奏性起伏。整体思路很简单：给 Bubbly 的宿主容器绑定一个动画。

具体来说，先给 Bubbly 的宿主容器添加一个 class。比如在引入 bubbly.js 之后、调用 bubbly() 之前，为 或某个