一、簡述

大家在用Canvas實(shí)現(xiàn)球體碰撞的動(dòng)畫場景時(shí)是否感覺無從下手，或者是知道怎么去實(shí)現(xiàn)，但是要進(jìn)行大量的計(jì)算，考慮非常多的細(xì)節(jié)，比如要考慮將外力分解為水平和垂直兩個(gè)方向，然后考慮各種碰撞的檢測，發(fā)生重疊后的修正，還有可能考慮引力方向和大小、透明度漸變等等這些，思考這些個(gè)計(jì)算邏輯時(shí)真的很讓人頭大，今天我就和大家分享一個(gè)非常好用的庫，一個(gè)專門用于在Canvas上實(shí)現(xiàn)球體碰撞和球體交互場景的庫--sphere-collision，通過簡單配置便可快速實(shí)現(xiàn)碰撞效果，而且還提供了鉤子函數(shù)，擴(kuò)展性極強(qiáng)，讓你實(shí)現(xiàn)想要的效果。

二、案例展示

下面展示幾個(gè)案例的實(shí)現(xiàn)效果，這些都是使用這個(gè)庫實(shí)現(xiàn)的動(dòng)畫效果，只要涉及到球體碰撞或球體交互的場景都可以使用這個(gè)庫。

1. 探照燈效果

2. 球體碰撞交互效果

3. 消滅行星小游戲

4. 各類球體自由落體交互效果

5. 炫酷倒計(jì)時(shí)動(dòng)畫

以上案例源碼均在visualization-collection開源項(xiàng)目中，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;
    // 繪制整個(gè)畫布的背景色
    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");

    // 實(shí)例化SphereCollision對(duì)象
    const sphereCollision = new SphereCollision(
        ctx,
        canvas,
        [
            {
                initX: 400,
                initY: 400,
                vx: 6,
                vy: 3,
                radius: globuleRadius,
            },
        ],
        { beforeDrawGlobules }
    );

    // 開使執(zhí)行動(dòng)畫
    sphereCollision.start();
}

四、API文檔

SphereCollisionC

GlobuleOptions

SphereCollisionOptions

MousePos

Direction

GlobuleC

五、特別說明

• 球體的fixedPos屬性為true時(shí)， 獲取不了外力，所以球體不會(huì)移動(dòng)，但還是會(huì)使其他球體受到外力，進(jìn)行反彈。
• 球體的receiveOutForce屬性為false時(shí)，獲取不了鼠標(biāo)穿過和其他球體碰撞產(chǎn)生的外力，即使另一個(gè)球體的receiveOutForce屬性為true。
• 球體的receiveWallForce屬性為false時(shí)，獲取不了來自墻體的外力，所以不會(huì)與墻體發(fā)生碰撞。
• 球體的beforeDrawGlobule和afterDrawGlobule兩個(gè)鉤子函數(shù)，主要作用是在繪制球體之前和之后分別去繪制其他元素，而afterCalculateNextFrameGlobule鉤子函數(shù)是用于做一些其他的邏輯判斷，因?yàn)橹挥羞@個(gè)函數(shù)里拿到的球體實(shí)例是帶有是否發(fā)生碰撞等相關(guān)信息的
• 如果實(shí)例化SphereCollision對(duì)象時(shí)傳入了beforeDrawGlobules鉤子函數(shù)，并且需要在每一幀繪制前要清除整個(gè)畫布，則需要使用者自己清除，這是考慮到有些不需要清除的場景。
• 如果要獲取鼠標(biāo)相關(guān)的信息或者想要實(shí)現(xiàn)鼠標(biāo)交互，實(shí)例化SphereCollision對(duì)象時(shí)就必須在第四個(gè)參數(shù)options中傳入monitorMousePos為true。
• 如果給球體配置了 gDirection 和 gCoefficient 屬性，建議就不要配置 collisionLossV 了。
• 非完全彈性碰撞會(huì)有速度的抵消，可能碰撞后的 x 軸或 y 軸方向上的速度相互抵消為 0，球體可能會(huì)停下來；完全彈性碰撞則不會(huì)有速度的抵消，速度大小不會(huì)改變(速度為 0 除外，速度為 0 的，碰撞后會(huì)和撞它的另一球的速度大小一致)，碰撞后僅改變方向; 在碰撞時(shí)如果其中有一個(gè)球體的 perfectlyElasticCollision 為 true，則兩球均使用完全彈性碰撞算法進(jìn)行計(jì)算。
• 如果需要的話，可以在任何時(shí)候動(dòng)態(tài)地修改球體實(shí)例的所有屬性值，以滿足自己的自定義需求。

六、關(guān)鍵版本更新日志

• v1.1.10

1. 新增支持球體完全彈性碰撞
2. 優(yōu)化代碼
   
   

• v1.1.8

1. 優(yōu)化碰撞算法
2. 解決一些已知bug
   
   

• v1.1.3

1. 新增支持純色球體
2. 新增支持四面墻中只有部分墻面有阻力，與球體發(fā)生碰撞
3. 解決一些已知bug
   
   

• v1.1.0

1. 考慮后續(xù)的功能擴(kuò)展，修改了SphereCollision類的參數(shù)，將之前的第四個(gè)及之后的參數(shù)都統(tǒng)一放到options對(duì)象中，并作為第四個(gè)參數(shù)傳入。
2. 新增支持上下左右四個(gè)引力方向
3. 新增支持球體進(jìn)行鼠標(biāo)拖拽交互
4. 新增的相關(guān)屬性及方法可自行查閱API文檔
   
   

更多個(gè)人文章

1. 兩個(gè)跨域頁面進(jìn)行跳轉(zhuǎn)傳參的終極方案
2. 徹底搞懂盒子模型
3. hashHistory和browserHistory的區(qū)別
4. 十分鐘帶你入門Chrome插件開發(fā)
5. 面試秘籍之排序算法