怎样让一个元素按圆的轨迹运动？

Question

我试了一下用setInterval 来做运动，取圆轨迹的“坐标”，但运动速度比较慢，程序的效率好像也比较低。
怎样做比较好？

另外，有点疑问：setInterval(function(){},time)
这里的time可以用小数吗？
我尝试了一下，好像用小数和1的效果是差不多的。是这样的吗？

Answer 1

javascriptx = r * Math.cos(omega * t) + x0;
y = r * Math.sin(omega * t) + y0;

參數方程而已嘛。。。

omega 是角速度，調大一點。。。

另外動畫我們一般用 requestAnimationFrame，幀頻 60fps，如果是 setTimeout 則 既不精確也不準確。(所以設置小數是毫無意義的，設置小於 15 的數是沒用的（有些瀏覽器是 5）)

1000/15 約等於 66 然而由於不穩定誤差很大所以實際上會很卡。。。

另外用 left top 做動畫效率很低因爲會 reflow + repaint 該元素及牽扯到的其它元素，建議改用 css transform

Answer 2

啊，不能用CSS来做吗？

版本1：
http://jsfiddle.net/2sfk5k0t/1/embedded/result,css,html/

感谢 @bf 指出了问题：元素本身也旋转了。那么就修正一下。版本2：
http://jsfiddle.net/2sfk5k0t/2/embedded/result,css,html/