Canvas粒子碰撞效果：物理反馈交互系统构建

Canvas粒子碰撞效果的核心并非简单“碰撞即停”，而是模拟真实物理响应——反弹、偏转、能量衰减乃至触发新行为。关键在于利用边界框（BBox）进行快速粗筛，再结合向量运算处理方向与速度变化。

坦白说，很多人在实现粒子碰撞时，习惯让两个球撞到一起就“啪”一下弹开，速度直接取反——这跟真实物理效果相差甚远。真正的碰撞效果，需要让粒子像台球那样：该反弹的反弹、该偏转的偏转，能量也会逐渐衰减，甚至碰撞后还能触发新的行为。而这一切的基础，就是快速判断“谁和谁发生了碰撞”。

借助BBox实现高效碰撞检测

Canvas本身没有内置碰撞API，全依赖手动计算。Motion Canvas这类框架虽然封装了BBox类，但原生实现其实只需四行比较：

• 获取两个粒子的矩形包围区域——左、右、上、下四边界坐标
• 判断是否重叠：left < other.right && right > other.left && top < other.bottom && bottom > other.top
• 只要重叠，就视为发生碰撞，可立即调用响应逻辑
• 为避免连续帧重复触发（例如两个粒子卡在一起反复弹跳），建议添加“已碰撞”标记，或设置最小间隔时间

碰撞后的物理反馈计算方法

单纯将速度取反（比如v.x = -v.x）过于生硬，看起来像在打乒乓球。要获得更自然的效果，需按如下方式处理：

• 根据碰撞角度调整反射方向：利用向量点积或法线投影，计算新的速度矢量
• 引入弹性系数（例如0.7～0.95），每次反弹损失部分动能：v *= elasticity
• 对于质量不同的粒子，按质量比例分配动量——大粒子被撞后几乎不动，小粒子则直接飞出去
• 如果鼠标作为动态“力场源”，可按距离施加吸引力或排斥力，叠加到粒子的加速度中

提升交互反馈感的细节设计

用户感知到的不仅是“撞上了”，而是“系统在回应我”。以下细节能大幅增强沉浸感：

• 碰撞瞬间将粒子尺寸放大一点，并短暂变亮，模拟冲击感
• 配合轻量级音效（使用Web Audio API，虽非必需但很加分）
• 触发小范围粒子爆发——例如在碰撞点生成3～5个高速飞散的小粒子，如同打碎了一个玻璃球
• 如果是连线粒子系统，碰撞后可临时断开连接线，0.2秒后渐显恢复，让视觉上形成“断开→重组”的节奏

性能优化不止于减少粒子数量

1000个粒子做两两检测，运算量可达百万级。真正可行的优化方案并非只降低粒子数量：

• 空间分区：采用二维网格将画布分成小块，仅检测同一格及相邻8格内的粒子
• 距离阈值提前过滤：先计算欧氏距离的平方（避免开方运算），超出阈值直接跳过BBox检测
• 将静止粒子（如背景装饰）设为不可碰撞，或单独归类不参与动态检测
• 利用requestAnimationFrame进行节流，非关键帧跳过部分粒子的碰撞检查