0

好吧，我猜这是给数学爱好者的。我对缓动函数有一些基本知识，但需要一些帮助。

我有一个使用“easeOutSine”函数通过 CSS 转换（translateX）翻译的元素。

它在 1500 毫秒内覆盖距离 A。我需要找出它需要多少时间才能覆盖距离 B（介于两者之间）

“easeOutSine”的功能是：

function easeOutSine(t, b, c, d) {
    return c * Math.sin(t/d * (Math.PI/2)) + b;
}

显然 A 和 B 对我来说是已知的值。但我需要知道将它们放在参数中的哪个位置或如何处理这个问题。首先十分感谢！

编辑：

示例：假设元素在这 1500 毫秒内移动了 1000 像素。当它处于 360 像素时，究竟过了多少时间？很容易找出它何时线性移动，但我无法使用easeOutSine 函数超越它。（当它到达这个位置时，我想将一个类附加到另一个元素）

4

1 回答 1

1

假设

我听到的是，如果你要在一张纸上从 t=0 到 t=1500 画线 y = c * sin(t/d*pi/2) + b，你的铅笔走过的距离将是 A。您的目标是找到距离为 B 的 t。

解决方案

长话短说，你会看到弧长公式。具体来说，您需要解决 sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt 从 0 到 t 的 B = 积分，其中 B、c 和 d 是常数，而您要查找的变量是 B。

对我来说，你所拥有的关于 A 的信息如何帮助你解决这个问题并不是很明显，所以我建议对 t 进行二分搜索，你的初始范围是 [0, 1500] 并且你“评估”函数（那个积分）通过一些近似积分的技术。sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt 的函数 y = 从 0 到 t 的积分在 t 上是单调的，因此给你正确答案。

很抱歉那是怎么回事；您要执行的操作实际上无法明确计算。如果您不熟悉该方法，您可能想查看有关如何对数学问题的答案进行二进制搜索的一些教程。祝你好运！

于 2016-06-07T17:28:41.833 回答