Bubbly跳跃特效制作教程 专业评测与推荐

核心结论：Bubbly 气泡库底层仅支持 Canvas 物理模拟，所有气泡只做随机漂浮、缓慢聚合与边缘反弹，缺乏重力加速度、落地检测、回弹形变等跳跃必需参数。要在气泡背景上实现跳跃特效，必须采用替代方案——通过 CSS 动画叠加容器，或使用 JS + DOM 单独构建弹跳小球。

简言之，Bubbly 专注于流体动画（浮动、飘散、淡入），无法处理 translateY 或 bounce 等位移弹跳。跳跃动作只能作为独立图层，叠在 Bubbly canvas 之上。

Bubbly 无法原生实现跳跃机制

要理解原因，须剖析 Bubbly 底层机制。它通过 canvas 逐帧驱动气泡位置，所有运动由内部物理模拟控制——气泡仅随机漂浮、聚合/散开、边缘反弹。关键缺失：垂直方向重力加速度、落地检测、回弹形变。强行修改源码注入 bounce 逻辑，将导致轨迹错乱、性能骤降，且 v1.0.0 未开放运动引擎 API。

因此，可靠方案是将跳跃动作作为独立图层，覆盖在 Bubbly canvas 上方。

借助 CSS 动画为气泡容器添加跳跃效果

此方法适用于需要整体气泡背景“微弹”的场景——页面加载时轻跃一次，或随用户滚动产生节奏性起伏。实现思路：为 Bubbly 宿主容器绑定自定义动画。

具体步骤：为 Bubbly 宿主容器添加类名。例如在引入 bubbly.js 后、调用 bubbly() 前，为 或