好吧，我想这是给数学爱好者的。我有一些关于缓动函数的基本知识，但需要一些帮助。
我有一个使用“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 像素。当它处于 360px 时，到底经过了多少时间？很容易找出它何时线性移动，但我无法使用 easeOutSine 函数来超越这一点。 (当它到达这个位置时，我想将一个类附加到另一个元素)
最佳答案
假设
我听到的是，如果您在一张纸上从 t=0 到 t=1500 追踪线 y = c * sin(t/d*pi/2) + b，则所走过的距离用你的铅笔画出的结果是 A。你的目标是找到 t，使得距离为 B。
解决方案
长话短说，您将看到 arc length formula 。具体来说，您需要求解 sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt 从 0 到 t 的 B = 积分，其中 B、c 和 d 是常量，您要查找的变量是 B。
对我来说，你所拥有的关于 A 的信息如何帮助你解决这个问题并不是很明显，所以我建议对 t 进行二分搜索，其中你的初始范围是从 [0, 1500] 并“评估”该函数(该积分)通过一些近似积分的技术。函数 y = sqrt(1+(pi*c/(2d))^2 * cos(pi*t/(2*d))^2)dt 从 0 到 t 的积分在 t 上是单调的，因此给你正确的答案。
抱歉，这太数学了；你想要做的事情实际上不可能明确计算。如果您不熟悉该方法，您可能想查看一些有关如何二分搜索数学问题答案的教程。祝你好运!
关于javascript - 如何获取具有 easyOutSine 的 CSS 过渡的元素需要覆盖一定距离的时间？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37639183/