如何使用jQuery.animate()创建"非线性"轨迹？

Question

我试图将一个元素从位置A动画到位置B,但我不希望它在每个点之间线性移动,我想要有一种"抛物线"轨迹.

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

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

谢谢!
丹尼尔

Answer 1

例如,您可以创建自己的"缓动"函数jQuery.easing,此函数将近似于90度的sin曲线

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

p从0-1号代表的动画时间的百分比,n是经过这个动画的实际时间,并且firstNum和diff是有点误导,它看起来好像在某些时候这将需要一个开始/结束的值,但是现在所有的宽松的功能只是标准化p值,以便firstNum = 0和diff = 1

我整理了一个简单的小提示,显示使用每个属性缓动和一些sin/cos函数,使用jQuery为圆圈中的div设置动画.