Javascript 在圆形路径上设置圆的动画

我在屏幕中央有一个物体（图像）。现在，我想围绕这个对象设置一些圆的动画。实现这一任务的最佳想法是什么？我应该使用任何专用的

JS

库制作动画吗

你可以同意。它并不完美，但您可以查看scr并添加所需的功能

---

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

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变换/动画（可以使用分数位置），画布元素，jQuery路径等等。您要求的是JavaScript解决方案，但在大多数现代浏览器中，不使用任何JavaScript，也可以通过使用关键帧动画来实现这一点

CSS

@关键帧旋转{
0%, 50% {
/*将元素保持在12点钟，直到动画完成一半*/
变换：旋转（0度）translateY（-150px）旋转（0度）；
}
}
#中心{
/*将圆放置在视口的中心*/
位置：固定；
左：50%；
最高：50%；
/*IE 10缺陷：强制硬件加速以防止边缘像素
在动画方面落后*/
变换：旋转（0.01度）；
}
.圆圈{
背景：红色；
边界半径：50%；
位置：绝对位置；
}
.中{
高度：200px；
宽度：200px；
左：-100px；/*上/左等于半径*/
顶部：-100px；
}
.外部{
/*注意：动画持续时间的前半部分是在12点钟*/
动画：旋转2秒放松1；
高度：60px；
宽度：60px；
左：-30px；/*上/左等于半径*/
顶部：-30px；
}
.八点钟{
/*两个旋转变换用于在旋转时保持方向。
第一个旋转是从顶部绕中心旋转的角度；第二个旋转正好减去这个。
translateY设置为所遵循的圆形路径的半径*/
变换：旋转（-120deg）translateY（-150px）旋转（120deg）；
}
.十点钟{
变换：旋转（-60度）平移（-150px）旋转（60度）；
}
.12点{
变换：旋转（0度）translateY（-150px）旋转（0度）；
z指数：2；/*这一个保持在顶部*/
}
.两点钟{
变换：旋转（60度）translateY（-150px）旋转（-60度）；
z-index:1；/*从12点到4点之间滑出此幻灯片*/
}
.下午四点{
变换：旋转（120度）translateY（-150px）旋转（-120度）；
}

HTML

当CSS动画不受支持时，它会优雅地退化为在圆的最终位置显示圆。Dabblet会在需要时自动添加前缀；在生产中，您可以使用或手动添加带前缀版本的

@关键帧

规则以及

动画

和

变换

属性

不幸的是，IE9不支持关键帧动画，并且仍在广泛使用，因此它没有获得良好的动画效果。如果这对您很重要，您可以通过对不支持CSS动画的浏览器使用JavaScript来解决这一问题。下面是一个使用Modernizer检测

@关键帧
支持并使用-prefix free获取前缀CSS
transform
属性的示例。以下是制作动画的代码：

JS
//将动画延迟指定的时间。
setTimeout（函数（）{
//开始制作动画。
间隔=设置间隔（函数（）{
//增加步长或完成动画。
如果（步骤>步骤）{
间隔时间；
返回；
}否则{
step++；
}
//将每个圆移动到其新位置。
对于（变量i=0；i

我已经在IE9虚拟机上测试过了，结果是可以比较的，如果不是很顺利的话。它在IE8及以下版本中不起作用-prefix free不支持这些版本，而且它需要进行更多的黑客攻击，我无法轻松证明，只要让
边界半径
正常工作。到目前为止，保守估计约90%的当前浏览器支持率，随着人们从旧版本IE更新或切换到其他浏览器，支持率会增加。
CSS将提供平滑度看看这一点


最好使用CSS3而不是JavaScript，因为生成的动画总是保证更流畅（尤其是在移动设备上），并且可以节省电池电量。
JSFIDLE对我不起作用，但我会阅读关于JQuery路径的文章，谢谢你使用firefox:-/All Browser-不。所有现代浏览器-是的。看看另一个
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);
}