jquery - 如何使用 jQuery.animate() 创建 "non-linear"轨迹？

Question

我正在尝试将一个元素从位置 A 动画到位置 B，但我不希望它在每个点之间线性移动，我希望有一种“抛物线”轨迹。

我可以使用 jQuery.animate() 吗？

或者我应该使用 setInterval() 从头开始​​手动编码吗？

谢谢!
丹尼尔

Answer 1

您可以在 jQuery.easing 上创建自己的“缓动”函数，例如，此函数将近似超过 90 度的正弦曲线

jQuery.easing.sin90 = function(p, n, firstNum, diff) {
    return Math.sin(p * Math.PI / 2) * diff + firstNum;
};

p 是 0-1 之间的数字，表示动画时间的百分比，n 是该动画实际耗时，firstNum code> 和 diff 有点误导，似乎在某些时候这会采用开始/结束值，但现在所有缓动函数只是标准化 p 值，因此firstNum = 0 和 diff = 1

我整理了a simple fiddle显示使用每个属性缓动和一些 sin/cos 函数来使用 jQuery 对 div 进行动画处理。