计算非线性 CSS 过渡持续时间以指定初始速度为目标答案

【问题标题】：Calculating non-linear CSS transition duration to target a specified initial speed计算非线性 CSS 过渡持续时间以指定初始速度为目标
【发布时间】：2020-08-31 17:23:44
【问题描述】：

我在网站中有一个用户拖动的元素，在释放该元素时我希望它转换到特定位置，我希望转换的初始速度与用户拖动元素的速度相匹配他们发布它的时间。

有一个very similar question 但是它只支持linear 计时功能，我想支持其他计时功能，例如ease-out。

我预测这将使用 Javascript 函数来解决，该函数将初始移动速度、行驶距离和计时函数作为参数并输出分配给过渡的持续时间。

【问题讨论】：

问题：如果我拖动一个元素并将我的光标移动到 sircualar 方向，你不知道/计算过渡的速度。您希望如何确定速度？或者，如果我开始快速拖动，然后在某个点之后放慢速度，你的过渡速度将如何工作？
目前我能想到的一种黑客方式可能是，注册鼠标移动事件并在移动时创建一个包含时间的列表。然后取第一个和最后一个之间的差异，并使用长度获得平均值。你可以使用这个平均值作为速度，但这并不是完全的证据，而且会有很多情况下它会失败

标签： javascript css math

【解决方案1】：

让我们首先将其视为linear 以简化事情，然后我们将看到它与其他转换一起使用。

因此，您希望过渡速度与用户拖动速度相同。如果它是linear 转换，那么您希望这种速度一直持续到元素到达它应该在的位置。因此，在这种情况下，您将使用用户拖动元素的速度来确定线性过渡的持续时间。

假设用户在100px/s 拖动并且有400px 可以移动，如果你将转换设置为400/100 = 4 所以4s linear，那么这将继续以用户离开它的相同速度移动并且会以线性方式到达那里。

现在事实证明，这也是其他转换的正确方法。如果您执行ease 与linear 但都具有相同的持续时间和距离，则ease 将开始时速度更快，然后逐渐减速，并且它们将同时到达。如果它们具有相同的持续时间，则它们都是这种情况。所以这意味着您所要做的就是使用distance / user speed 来计算持续时间并设置您想要的过渡类型。

视觉效果可能会有所帮助，请参阅https://cubic-bezier.com/，只要曲线从直线上方开始，它最初会比直线走得更快。并且为了让线性的速度与用户离开它的速度相同，计算持续时间为distance/speed。

【讨论】：