这是一款基于React 与 Canvas 2D技术实现的彩色气泡碰撞屏保动画。蓝色渐变背景上，半透明气泡从左下方陆续进入，带着细亮边缘向上漂浮，碰到边界或其他气泡后改变方向。React 挂载和管理画布生命周期，连续动画与碰撞计算由脚本完成。画面没有图片贴图，气泡的色彩与高光由绘图代码生成，可用于屏保风格背景、等待画面或轻量视觉装饰。

彩色气泡如何持续进入并相互碰撞

气泡数量随面积变化。脚本根据窗口面积、气泡直径与密度计算目标数量，避免不同屏幕始终堆积同样多的圆。
漂浮轨迹带有扰动。速度并非固定直线，多层噪声产生方向变化，同时设有速度上限控制移动节奏。
色相持续转动。每个气泡拥有独立的初始色相，配合高光与透明边缘，让重叠时仍能辨认各自轮廓。

Canvas气泡的运动数据与画布缩放

气泡以位置、速度和半径等数据参与模拟，渲染时再转成画面。每帧按时间差更新运动，碰撞恢复系数控制反弹强度；新气泡以固定时间间隔进入，达到目标数量后停止增加。窗口变化时同步调整画布像素尺寸，设备像素比也设了上限，兼顾清晰度与绘制开销。

const RESTITUTION = 0.5;

彩泡屏保的密度和速度在哪里修改

主要参数集中在 main.js 的 Bubbles 函数开头，包括半径、密度、入场间隔、初始速度和噪声强度；背景渐变位于 style.css。想让画面更安静，可以减少密度、放慢速度和色相变化。React 与渲染依赖已在 vendor 中本地保存，修改时应保持版本一致。

气泡屏保嵌入网页时需要知道什么

这是电脑系统屏保程序吗？

它是网页内的屏保风格动画，不负责系统空闲检测或锁屏。可以放入等待页面、展示终端或网页背景，系统级屏保需要另外封装。

可以把文字按钮放在气泡下面吗？

画布已关闭指针事件，因此不会直接拦截点击；但它使用很高的显示层级，视觉上可能盖住内容，嵌入时应按页面需要调整层级、透明度和容器范围。

手机上气泡太多怎么办？

先降低 DENSITY 或增大半径，再观察目标手机的流畅度。碰撞检测与持续绘制都会增加开销，页面隐藏时暂停动画也可以作为后续优化方向。

适合科技氛围背景、展示终端和屏保主题页面。下载后可查看完整绘制、运动与碰撞逻辑。