- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
好吧,我想这是给数学爱好者的。我有一些关于缓动函数的基本知识,但需要一些帮助。
我有一个使用“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/
好吧,我想这是给数学爱好者的。我有一些关于缓动函数的基本知识,但需要一些帮助。 我有一个使用“easeOutSine”函数通过 CSS 转换 (translateX) 进行翻译的元素。 它在 1500
我是一名优秀的程序员,十分优秀!