如何使用jQuery.animate（）創建「非線性」軌跡？

Question

我想要從位置A到位置B的元素動畫，但我不希望它在每個點之間呈線性關係，我想要一種「拋物線」軌跡。

可以使用jQuery.animate（）嗎？或者我應該手動從頭開始使用setInterval（）來編碼它嗎？

謝謝！
丹尼爾

Answer 1

這裏是一個項目

http://plugins.jquery.com/project/MoveTo-Bezier-Curve

Answer 2

您可以創建自己的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和diff是有點誤導，它看起來好像在某些時候這將需要一個開始/結束的值，但是現在所有的緩解作用只是標準化p值，以便firstNum = 0和diff = 1

我放在一起a simple fiddle表現使用每個屬性easing和一些正弦/餘弦函數來使用jQuery爲圓圈div創建動畫。