我在屏幕中央有一个物体(图像)。现在我想为这个对象周围的一些圆圈设置动画。实现该任务的最佳想法是什么?我应该使用任何专用的JS
动画库?
您可以使用一些简单的三角函数,如下所示:
在线演示在这里
function loop() {
/// calc x and y position with radius of center +
x = cx + radius * Math.cos(angle * Math.PI / 180);
y = cy + radius * Math.sin(angle * Math.PI / 180);
/// set satelite's center to that position
$('#sat1').css({left:x - radiusSat, top:y - radiusSat});
/// increase angle
angle++;
if (angle>360) angle = 0;
/// loop
requestAnimationFrame(loop);
}
该演示已扩展为支持所有五颗卫星。 您当然需要自己添加其他卫星。您可以通过增加角度增量来提高速度。
请注意参考号。您对帖子的新评论:此处的代码和示例显示了原则为了达到你所追求的结果你需要做什么。由于 SO 的目的不是生成免费代码/完整的解决方案,因此未提供此功能,但使用此处所示和演示的原则,您应该能够采用它们来做您希望它们做的事情。
还有其他方法可以移动卫星,例如使用 CSS3 变换/动画(这将为您提供更平滑的运动,因为您可以使用分数位置)、Canvas 元素、jQuery 路径等。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)