JavaScript 运动 05 —— 碰撞运动

前面的四篇文章分别实现了匀速运动、缓冲运动和弹性运动，本文继续，实现最后一个常见运动——碰撞运动。

碰撞运动

碰撞运动是两个物体接触后速度反向的运动。物体在某个容器内运动，当碰到容器的边缘后，速度反向。
去掉外层容器中间的分割线，恢复到最初始的布局：

#par{
    width: 600px;
    height: 300px;
    border: 1px solid #333;
    margin:50px auto;
    position: relative;
    text-align: center;
    padding-top: 10px;
}

#inner{
    width: 100px;
    height: 100px;
    background: orange;
    position: absolute;
    left: 0;
    top: calc(50% - 50px);
    text-align: center;
    line-height: 100px;
    opacity: 1;
}

碰撞运动初始布局.png

碰撞运动在容器内部进行，因此具有两个速度：水平方向的速度 speedX 和垂直方向的速度 speedY。
修改 animate 函数，实现基本的碰撞效果：

function animate(ele = null,config = {
    speedX:10,
    speedY:10,
    container:null,
}){
    // 清除定时器
    clearInterval(ele.timer);
    
    let { speedX, speedY, container } = config; 
    speedX = speedX || 10;
    speedY = speedY || 10;

    return new Promise((resolve)=>{
        ele.timer = setInterval(()=>{
            let left = parseInt(getCurrentStyle(ele,"left")) + speedX;
            let top = parseInt(getCurrentStyle(ele,"top")) + speedY;

            // 判断运动是否过界
            // 判断左右边界
            if(left<= 0){
                speedX *= -1;
                left = 0;
            }else if(left + ele.offsetWidth >= container.clientWidth){
                speedX *= -1;
                left = container.clientWidth - ele.offsetWidth;
            }

            // 判断上下边界
            if(top <= 0){
                speedY *= -1;
                top = 0;
            }else if(top + ele.offsetHeight >= container.clientHeight){
                speedY *= -1;
                top = container.clientHeight - ele.offsetHeight;
            }

            // 设置速度
            ele.style.left = left + "px";
            ele.style.top = top + "px";


        },30);
    });
}

调用运动函数：

...
const ele = document.getElementById("inner");
async function start(){
    await animate(ele,{
        container:document.getElementById("par"),
        speedX:15,
        speedY:20
    });
}
...

效果如图所示：

简易碰撞运动.gif
在碰撞运动的过程中，需要对触底进行判断，当小滑块在运动中会触底（或者超出底边时），将小滑块拉回底边位置并设置速度反向。

带有重力的碰撞运动

和弹性运动的摩擦力一样，我们可以使用一个重力系数来模拟重力：

function animate(ele = null,config = {
    speedX:10,
    speedY:10,
    gravity:5,
    coeff:0.8,
    container:null,
}){
    // 清除定时器
    clearInterval(ele.timer);
    
    let { speedX, speedY, container,gravity,coeff } = config; 
    speedX = speedX || 10;
    speedY = speedY || 10;
    gravity = gravity || 5;
    coeff = coeff || 0.8;

    return new Promise((resolve)=>{
        ele.timer = setInterval(()=>{
            // 生活常识告诉俺们，每次下落时，垂直速度都比上一次快
            speedY += gravity;
            let left = parseInt(getCurrentStyle(ele,"left")) + speedX;
            let top = parseInt(getCurrentStyle(ele,"top")) + speedY;

            // 判断运动是否过界
            // 判断左右边界
            if(left<= 0){
                speedX *= -coeff;
                speedY *= coeff;
                left = 0;
            }else if(left + ele.offsetWidth >= container.clientWidth){
                speedX *= -coeff;
                speedY *= coeff;
                left = container.clientWidth - ele.offsetWidth;
            }

            // 判断上下边界
            if(top <= 0){
                speedY *= -coeff;
                speedX *= coeff;
                top = 0;
            }else if(top + ele.offsetHeight >= container.clientHeight){
                speedY *= -coeff;
                speedX *= coeff;
                top = container.clientHeight - ele.offsetHeight;
            }
    
            // 设置速度
            ele.style.left = left + "px";
            ele.style.top = top + "px";


        },30);
    });
}

清除定时器

当碰撞运动的水平速度（speedX）和垂直速度（speedY）都为 0 ，并且小滑块处于容器底部时，碰撞运动停止，此时我们就该清除定时器了。同时，也需要对 speedX 和 speedY 进行浮点数处理，以及重力系数的合法值检验。
修改 animate 函数：

function animate(ele = null,config = {
    speedX:0,
    speedY:0,
    gravity:5,
    coeff:0.8,
    container:null,
}){
    // 清除定时器
    clearInterval(ele.timer);

    let { speedX, speedY, container,gravity,coeff } = config; 
    speedX = speedX || 0;
    speedY = speedY || 0;
    gravity = gravity || 5;

    // 错误处理
    if(coeff > 1){
        throw new Error("碰撞系数参数错误！");
    }
    coeff = coeff || 0.8;

    return new Promise((resolve)=>{
        ele.timer = setInterval(()=>{
            // 生活常识告诉俺们，每次下落时，垂直速度都比上一次快
            speedY += gravity;
            let left = parseInt(getCurrentStyle(ele,"left")) + speedX;
            let top = parseInt(getCurrentStyle(ele,"top")) + speedY;

            // 判断运动是否过界
            // 判断左右边界
            if(left<= 0){
                speedX *= -coeff;
                speedY *= coeff;
                left = 0;
            }else if(left + ele.offsetWidth >= container.clientWidth){
                speedX *= -coeff;
                speedY *= coeff;
                left = container.clientWidth - ele.offsetWidth;
            }

            // 判断上下边界
            if(top <= 0){
                speedY *= -coeff;
                speedX *= coeff;
                top = 0;
            }else if(top + ele.offsetHeight >= container.clientHeight){
                speedY *= -coeff;
                speedX *= coeff;
                top = container.clientHeight - ele.offsetHeight;
            }

            // 处理小数
            if(Math.abs(speedX) < 1){
                speedX = 0;
            }

            if(Math.abs(speedY) < 1){
                speedY = 0;
            }

            // 运动停止条件
            if(!speedX && !speedY && top === container.clientHeight - ele.offsetHeight){
                clearInterval(ele.timer);
                resolve()
            }else{
                // 设置速度
                ele.style.left = left + "px";
                ele.style.top = top + "px";
            }
        },30);
    });
}

调用运动函数：

const ele = document.getElementById("inner");
async function start(){
    await animate(ele,{
        container:document.getElementById("par"),
    });
}

最终效果如图：

最终效果.gif

总结

本文介绍了碰撞运动的实现，下边是一些要点：

• 碰撞运动拥有水平和垂直两个方向的速度
• 碰撞运动需要进行上下左右四个边界的检测
• 带有重力的碰撞运动，每次碰撞之后，都要乘以碰撞系数，以减小速度
• 带重力的碰撞运动停止条件：水平速度和垂直速度都为0
• 当水平速度或垂直速度的绝对值趋近于 0 时，进行精度处理，直接将此速度设置为 0
• 碰撞运动停止条件：水平速度（speedX）和垂直速度（speedY）都为 0，并且物体处于容器底部

碰撞运动至此就写完了，下篇文章中，将在此基础上，介绍一个基于拖拽的碰撞运动。

完。