javascript - 圆形路径上的动画圆圈

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

Answer 2

CSS会给平滑度看看这个

关联

最好使用 CSS3 而不是 JavaScript，因为总能保证生成的动画更流畅（尤其是在移动设备上），而且它可以节省电池电量。

Answer 3

您要求使用 JavaScript 解决方案，但可以在大多数现代浏览器中通过使用关键帧动画来完成此操作，而无需任何 JavaScript 。

Dabblet上的演示。

CSS

@keyframes rotate {
    0%, 50% {
        /* Keep the element at 12 o'clock until halfway through animation. */
        transform: rotate(0deg) translateY(-150px) rotate(0deg);
    }
}

#centre {
    /* Position circles in the centre of the viewport. */
    position: fixed;
    left: 50%;
    top: 50%;

    /* IE 10 bug: force hardware acceleration to prevent edge pixels
       being left behind on animation. */
    transform: rotateZ(0.01deg);
}

.circle {
    background: red;
    border-radius: 50%;
    position: absolute;
}

.middle {
    height: 200px;
    width: 200px;
    left: -100px; /* top/left equal to radius. */
    top: -100px;
}

.outer {
    /* Note: first half of animation duration is spent at 12 o'clock. */
    animation: rotate 2s ease-out 1;
    height: 60px;
    width: 60px;
    left: -30px; /* top/left equal to radius. */
    top: -30px;
}

.at-8-oclock {
    /* Two rotate transforms are used to maintain orientation while turning.
       First rotate is angle about centre from top; second is just minus this.
       translateY is set to the radius of the circular path being followed. */
    transform: rotate(-120deg) translateY(-150px) rotate(120deg);
}

.at-10-oclock {
    transform: rotate(-60deg) translateY(-150px) rotate(60deg);
}

.at-12-oclock {
    transform: rotate(0deg) translateY(-150px) rotate(0deg);
    z-index: 2; /* This one stays on top. */
}

.at-2-oclock {
    transform: rotate(60deg) translateY(-150px) rotate(-60deg);
    z-index: 1; /* Make this slide out from between 12 and 4 o'clock. */
}

.at-4-oclock {
    transform: rotate(120deg) translateY(-150px) rotate(-120deg);
}

HTML

<div id="centre">
    <div class="middle circle"></div>
    <div class="outer circle at-8-oclock"></div>
    <div class="outer circle at-10-oclock"></div>
    <div class="outer circle at-12-oclock"></div>
    <div class="outer circle at-2-oclock"></div>
    <div class="outer circle at-4-oclock"></div>
</div>

当不支持 CSS 动画时，它会优雅地降级为在其最终位置显示圆圈。Dabblet 会在需要的地方自动添加前缀；在生产中，您可以使用-prefix-free或手动添加@keyframes规则的前缀版本和animationandtransform属性。

不幸的是，IE 9 不支持关键帧动画，并且仍在广泛使用，因此无法获得漂亮的动画效果。如果它对您很重要，您可以通过对不支持 CSS 动画的浏览器使用 JavaScript 来解决这个问题。这是一个关于 jsFiddle的演示，它使用 Modernizr 来检测@keyframes支持并使用 -prefix-free 来获取前缀 CSStransform属性。这是执行动画的代码：

JS

// Delay animation for specified time.
setTimeout(function() {

    // Start animating.
    interval = setInterval(function() {

        // Increment step or finish animation.
        if (step > steps) {
            clearInterval(interval);
            return;
        } else {
            step++;
        }

        // Move each circle to its new position.
        for (var i = 0; i < circleCount; i++) {
            var circle = circles[i],
                newAngle = Math.easeOutQuad(
                    step,
                    circle.startAngle,
                    circle.rotateThrough,
                    steps
                );

            // Update circle angle.
            circle.currentAngle = newAngle;
            setCircleAngle(circle.element, newAngle);
        }

    }, intervalMs);

}, startAfterMs);

// Set the angle of one of the circle elements.
function setCircleAngle(circle, angle) {
    var x = pathRadius * Math.cos(angle * Math.PI / 180),
        y = pathRadius * Math.sin(angle * Math.PI / 180);

    circle.style.top = (x - circleRadius) + 'px';
    circle.style.left = (y - circleRadius) + 'px';
};

Math.easeOutQuad = function (t, b, c, d) {
    t /= d;
    return -c * t*(t-2) + b;
};

我已经在 IE9 VM 中对此进行了测试，结果是相当的，即使不是那么顺利。它在 IE8 及以下版本中不起作用；-prefix-free 不支持这些版本，而且它需要更多的技巧，而不是我可以很容易地证明只是为了开始border-radius工作。到目前为止，这给出了大约 90% 当前浏览器支持的保守估计，随着人们从旧版本的 IE 更新或切换到其他浏览器而增加。

Answer 4

您可以为此使用jQuery.Path。它并不完美，但您可以查看 scr 并添加您需要的功能。

这是一个显示基本功能的小提琴。

var arc_params = {
    center: [100,100],
        radius: 50,
        start: 0,
        end: 72000
  }
function animate(){
$(".animatingDiv").animate({path : new $.path.arc(arc_params)}, 100000)
}

animate();