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

Question

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

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

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

{{1}}

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

Answer 1

您正在使用animation-target内的result。我们假设您有一个 [a，b] 的间隔来制作动画。如果我们假设 P1 和 P2 在此区间内且 | P1.x - P2.x | 〜0 ，但 | P1.x - P2.x | ＆LT;＆GT; 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);如果这不够顺利，那么您将能够通过CSS样式来改善这一点。 transition，指定每个步骤所需的时间，在本例中为10毫秒。您可以在Javascript中使用Math对象的sin和cos函数。