首页 > 怎样让一个元素按圆的轨迹运动?

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

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

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


啊,不能用CSS来做吗?

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

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


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

【热门文章】
【热门文章】