javascript - 使用衰减正弦波从 Val 过渡到 Val

Question

我正在努力构建允许我从起始值过渡到目标最终值的公式，同时使用 Sin 或 Cos 波在指定时间内衰减？

我正在尝试使用 CSS 和 jsfiddle 模仿我在下面的示例中看到的弹跳效果。我制作这个示例只是为了视觉效果。最终的公式可以用简单的数学来写，而不是特定于语言。

我的目标是创建一个函数，我可以传递这些核心变量并让它返回所有位置的数组。

start = 0.0 
end = 200.0 
duration = 1000 
bounces = 10

https://jsfiddle.net/JokerMartini/bkw8vqyc/3/

Answer 1

您正在使用result 中的animation-target。假设您有一个 [a, b] 间隔来制作动画。如果我们假设 P1 和 P2 在此区间内并且 |P1.x - P2.x| ~ 0，但 |P1.x - P2.x| <> 0，那么你可以分别通过它们的正弦和余弦来计算它们的x。如果您将 [a, b] 的间隔视为彼此非常接近的一组连续点，那么您的全局动画算法将如下所示:

p1 <- a - step
p2 <- a
while p1 <= b
    p1 <- p2
    p2 <- p2 + step
    animate(p1, sin(p1), p2, sin(p2))
end while

现在，如果您正在使用 Javascript，您将能够通过非常接近的事件来完成此操作，例如 setInterval(yourfunction, 10); 如果这不够流畅，那么您将能够通过 transition 的 CSS 样式来改进这一点，指定每一步所需的时间，在本例中为 10 毫秒。您可以使用 Math 的 sin 和 cos 函数Javascript 中的对象。