计算缓和持续时间作为距离的函数

Question

我想要一些函数来计算动画的持续时间，这样即使距离改变，速度也保持不变。

====================================
|                                  |
|<============ width =============>|
|                                  |
|         <====== distance1 ======>|
|                                  |
|               <=== distance2 ===>|
|                                  |
===================================

在处理线性缓和时，这是微不足道的，

function getDuration (width, distance, duration) {
  return duration * (1 - distance / width);
}

但是，当使用非线性缓动函数时，这变得更加复杂，例如easeInOutQuad （此问题的一个例子： http ： //jsfiddle.net/Wexcode/rdrbm8et/3/ ）。

给定缓动函数，例如easeInOutQuad ，如何计算持续时间，使得任何距离的速度保持不变？

easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t },

资料来源： https ： //gist.github.com/gre/1650294

资料来源： http ： //api.jqueryui.com/easings/

Answer 1

给定函数y = f(t) ，其中y是距离，t是简单求解t的时间，并使用t = g(y)函数来确定到达给定距离所需的时间。

例如，在easeInOutQuad缓动中，可以求解-1+(4-2*t)*t ：

资料来源： http ： //www.wolframalpha.com/input/？ i = Solve％28y +％3D + -1％2B％284-2 * t％29 * t％2C + t％29

在练习中，您将乘以duration t倍来获得新的持续时间。

 var ratio = distance / width;
 if (ratio <= .5) {
   return duration * Math.sqrt(ratio * 1/2);
 } else if (ratio <= 1) { 
   return duration * (1 - Math.sqrt(1-ratio) / Math.sqrt(2));
 }

http://jsfiddle.net/Wexcode/rdrbm8et/6/

Answer 2

您应该使用一些高级数学来计算公式生成的弧长。

好的解释在这里 。 您应该只使用以下公式