jquery - 应用对数动画

Question

在 Psuedocode 中，如果我有一个对象，我希望根据 0 到 1 的某个增量范围以非线性方式进行转换。

如何应用“缓入/缓出”等概念？

本质上，我希望对象开始缓慢地动画化，但开始加速，直到到达 delta = 1 处的所需位置。

这是一个对数动画。

例如:

Delta = Delta* function(x)

object.transform = Do Something with the Delta.

Answer 1

假设您将动画在时间 T 上分为 N 个相等的步长，Delta = (t - t0)/T。

如果您进行线性速度变换，您将在时间 t 处选择帧 N * Delta。

要应用缓入/缓出，您需要在开始和结束时较慢地交换帧，在中间较快地交换帧。

您可以手动编码速度函数或使用具有适当行为的东西。 sin 是一个可以为您工作的函数。您需要对其进行缩放，因为它在 -PI/2 到 PI/2 范围内从 -1 到 +1 .

frame_number(t) = (int) (N * 0.5*(1 + sin(PI*(Delta-0.5)))