javascript - 根据速度和网格计算减速度

Question

我正在尝试计算 requestFrame 中的衰减或速度循环基于我知道速度(v)和我想行进的距离这一事实。我也知道ms对于每一帧。
所以一个简单的衰减算法是:velocity *= 0.9这会平稳且很好地减慢速度，但我希望动画元素停在给定位置(对齐网格)。那么如何准确计算减速度呢？

Answer 1

我不得不承认，不清楚在您的场景中是否有 1、2 或 3 维，我将谈论线性运动；请记住，在多维环境中，速度、加速度和距离是向量。
我会使用均匀加速公式:
S = v0 * t + 1/2 * a * t ^ 2
vt = v0 + a * t
从你的问题看来，加速度和时间应该是问题的输出。
你的问题中最后不清楚的是，在你说“我知道我想走的距离”之前，你需要网格上的运动结束，这两个句子似乎是相反的......我会处理这个四舍五入的结尾计算过程开始时的位置。
现在我们的问题有以下输入:

D(距离)，已知

v0(初始速度)，已知

vt(结束速度)，知道:0

dt(增量时间)，已知:两个连续帧之间的时间，以秒表示(不是毫秒)

让我们开始用加速度的函数来表达时间(第二个公式)
t = (vt - v0)/a
vt = 0，所以
t = - v0/a
让我们在第一个公式中替换它
S = - v0 ^ 2/a + 1/2 * a (- v0/a) ^ 2 = - (v0 ^ 2)/(2 * a)
从这里我们可以找到加速度
a = - (v0 ^ 2)/(2 * S)
从第二个公式开始
t = - v0/a
正如我们所说，在过程开始时，我们需要将距离四舍五入到对齐网格的位置:

rD = roundDistanceToGrid(D);
a = - velocity * velocity / 2 / rD;
t = - velocity / a;

t不会是 dt 的整数乘数
从现在开始，直到耗时小于 t , 在每一帧

velocity += a * dt;

在时间过去后的第一帧上，为了修复由于舍入导致的错误，将速度设置为零并将对象准确地放置在网格上。