我试了一下用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/
javascript
x = 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