javascript - 怎样让一个元素按圆的轨迹运动?
大家讲道理
大家讲道理 2017-04-10 15:28:44
[JavaScript讨论组]

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

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

大家讲道理
大家讲道理

光阴似箭催人老,日月如移越少年。

全部回复(2)
巴扎黑
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

迷茫

啊,不能用CSS来做吗?

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

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

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号