时间戳

首页 > 解决方案 > 根据速度和网格计算减速度

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

问题描述

我正在尝试requestFrame根据我知道速度（v）和我想要行进的距离这一事实来计算循环中的衰减或速度。我也知道ms每一帧。

所以一个简单的衰减算法是：

velocity *= 0.9

这会平稳且很好地减慢速度，但我希望动画元素停在给定位置（对齐网格）。那么如何准确计算减速度呢？

标签： javascriptanimationmathvelocity

解决方案

我不得不承认，不清楚在您的场景中是否有 1、2 或 3 维，我将谈论线性运动；请记住，在多维环境中，速度、加速度和距离是向量。

我会使用均匀加速公式：

S = v0 * t + 1/2 * a * t ^ 2

vt = v0 + a * t

从你的问题看来，加速度和时间应该是问题的输出。

你的问题中最后不清楚的是，在你说“我知道我想走的距离”之前，你需要网格上的运动结束，这两个句子似乎是相反的......我会处理这个四舍五入的结尾计算过程开始时的位置。

现在我们的问题有以下输入：

  1. D（距离），已知
  2. v0（初始速度），已知
  3. vt（结束速度），知道：0
  4. 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;

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

推荐阅读