jQuery和圍繞中心點的動畫

Question

我想知道圍繞中心點以圓形運動對元素進行動畫製作的最佳方法嗎？

我不能完全弄清楚... :(

在此先感謝。

Neuroflux。

Answer 1

最簡單我能想到的是：

1. 使相對
2. 使動畫元素是上面
3. 計算頂子，使用留下的中心點位置：
   math.sin（時間*（角/秒））*距離
   math.cos（....）

簡單的演示：

var elem = $('h1:eq(0)') 
    .append('<span id="round" style="position:absolute;background-color:red;">&nbsp;</span>') 
    .css('position','relative') 
    .find('span#round'); 

var i = 0; 
setInterval(function(){  
    ++i; 
    elem.css({'left': Math.sin(i * 0.02) * 100, 'top': Math.cos(i * 0.02) * 100});}, 100); 

看到它在行動jsfiddle。

Answer 2

使用jquery.path插件，這裏是一個demo。

（發現它來自另一個問題：How would you animate something so that it follows a curve?）