一、简述

大家在用Canvas实现球体碰撞的动画场景时是否感觉无从下手，或者是知道怎么去实现，但是要进行大量的计算，考虑非常多的细节，比如要考虑将外力分解为水平和垂直两个方向，然后考虑各种碰撞的检测，发生重叠后的修正，还有可能考虑引力方向和大小、透明度渐变等等这些，思考这些个计算逻辑时真的很让人头大，今天我就和大家分享一个非常好用的库，一个专门用于在Canvas上实现球体碰撞和球体交互场景的库--sphere-collision，通过简单配置便可快速实现碰撞效果，而且还提供了钩子函数，扩展性极强，让你实现想要的效果。

二、案例展示

下面展示几个案例的实现效果，这些都是使用这个库实现的动画效果，只要涉及到球体碰撞或球体交互的场景都可以使用这个库。

1. 探照灯效果

2. 球体碰撞交互效果

3. 消灭行星小游戏

4. 各类球体自由落体交互效果

5. 炫酷倒计时动画

以上案例源码均在visualization-collection开源项目中，github地址：https://github.com/hepengwei/visualization-collection

三、基本用法

安装

npm i sphere-collision

使用

import SphereCollision from "sphere-collision";

const canvasWidth = 600; // 画布宽度
const canvasHeight = 600; // 画布高度
const globuleRadius = 60; // 球半径

const beforeDrawGlobules = (sphereCollision) => {
    const { ctx } = sphereCollision;
    // 绘制整个画布的背景色
    ctx.clearRect(0, 0, canvasWidth, canvasHeight);
    ctx.beginPath();
    ctx.fillStyle = "#000000";
    ctx.fillRect(0, 0, canvasWidth, canvasHeight);
};

const canvas = document.getElementById("myCanvas");
if (canvas) {
    canvas.width = canvasWidth;
    canvas.height = canvasHeight;
    const ctx = canvas.getContext("2d");

    // 实例化SphereCollision对象
    const sphereCollision = new SphereCollision(
        ctx,
        canvas,
        [
            {
                initX: 400,
                initY: 400,
                vx: 6,
                vy: 3,
                radius: globuleRadius,
            },
        ],
        { beforeDrawGlobules }
    );

    // 开使执行动画
    sphereCollision.start();
}

四、API文档

SphereCollisionC

GlobuleOptions

SphereCollisionOptions

MousePos

Direction

GlobuleC

五、特别说明

• 球体的fixedPos属性为true时， 获取不了外力，所以球体不会移动，但还是会使其他球体受到外力，进行反弹。
• 球体的receiveOutForce属性为false时，获取不了鼠标穿过和其他球体碰撞产生的外力，即使另一个球体的receiveOutForce属性为true。
• 球体的receiveWallForce属性为false时，获取不了来自墙体的外力，所以不会与墙体发生碰撞。
• 球体的beforeDrawGlobule和afterDrawGlobule两个钩子函数，主要作用是在绘制球体之前和之后分别去绘制其他元素，而afterCalculateNextFrameGlobule钩子函数是用于做一些其他的逻辑判断，因为只有这个函数里拿到的球体实例是带有是否发生碰撞等相关信息的
• 如果实例化SphereCollision对象时传入了beforeDrawGlobules钩子函数，并且需要在每一帧绘制前要清除整个画布，则需要使用者自己清除，这是考虑到有些不需要清除的场景。
• 如果要获取鼠标相关的信息或者想要实现鼠标交互，实例化SphereCollision对象时就必须在第四个参数options中传入monitorMousePos为true。
• 如果给球体配置了 gDirection 和 gCoefficient 属性，建议就不要配置 collisionLossV 了。
• 非完全弹性碰撞会有速度的抵消，可能碰撞后的 x 轴或 y 轴方向上的速度相互抵消为 0，球体可能会停下来；完全弹性碰撞则不会有速度的抵消，速度大小不会改变(速度为 0 除外，速度为 0 的，碰撞后会和撞它的另一球的速度大小一致)，碰撞后仅改变方向; 在碰撞时如果其中有一个球体的 perfectlyElasticCollision 为 true，则两球均使用完全弹性碰撞算法进行计算。
• 如果需要的话，可以在任何时候动态地修改球体实例的所有属性值，以满足自己的自定义需求。

六、关键版本更新日志

• v1.1.10

1. 新增支持球体完全弹性碰撞
2. 优化代码
   
   

• v1.1.8

1. 优化碰撞算法
2. 解决一些已知bug
   
   

• v1.1.3

1. 新增支持纯色球体
2. 新增支持四面墙中只有部分墙面有阻力，与球体发生碰撞
3. 解决一些已知bug
   
   

• v1.1.0

1. 考虑后续的功能扩展，修改了SphereCollision类的参数，将之前的第四个及之后的参数都统一放到options对象中，并作为第四个参数传入。
2. 新增支持上下左右四个引力方向
3. 新增支持球体进行鼠标拖拽交互
4. 新增的相关属性及方法可自行查阅API文档
   
   

更多个人文章

1. 两个跨域页面进行跳转传参的终极方案
2. 彻底搞懂盒子模型
3. hashHistory和browserHistory的区别
4. 十分钟带你入门Chrome插件开发
5. 面试秘籍之排序算法