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

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 easing中，可以解决-1+(4-2*t)*t：

​

​

来源：http://www.wolframalpha.com/input/?i=Solve%28y+%3D+-1%2B%284-2*t%29*t%2C+t%29

在实践中，您可以将t乘以您的duration以获得新的持续时间。

 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

你应该使用一些高等数学来计算由公式生成的圆弧长度。

here是一个很好的解释。你应该只使用下面的公式

​

​