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

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)函数确定到达给定距离所需的时间。 / p>

例如，在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

在实践中，您可以将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。您应该只使用以下公式