Canvas学习笔记——缓动

Posted 2020-06-17

当你驾车在高速公路上行驶时，速度是很快的，而快到收费站时，则开始减速直到停下。将这个例子转换成物理模型就是当物体向终点运动时，开始速度会很快，而在快要到达终点时，速度会逐渐放缓直至0，整个运动过程就是缓动。距离越远，速度就越大，距离越近，速度就越慢，也就是距离和速度是成正比关系的。

如果t为1，则

也就是速度等于距离乘以一个0到1的小数。

v = (target - currentPosition) * k;     //  k(0,1]

 

 

然而这样物体是永远无法到达目标点的，因为存在很多小数，所以不能达到target === x。为了解决这个问题，需要加上一段限制避免冗余的运算：

if(Math.abs(targetX - ball.x) < 0.1 && Math.abs(targetY - ball.y) < 0.1) {
        ball.x = targetX;
        ball.y = targetY;
        window.cancelRequestAnimationFrame(requestId);
}