动画圆形路径上的圆圈

Question

我在屏幕中央有一个对象(图像).现在我想围绕这个对象动画一些圆圈.实现这项任务的最佳想法是什么？我应该使用任何专用JS的动画库吗？

Answer 1

您可以使用一些简单的三角函数,例如:

在线演示在这里

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路径等.