使用活动类暂停循环路径上的旋转圆圈

Question

目前具有基于SO代码的以下内容，即使用css和jquery在圆形路径上旋转的图像圈。 https://jsfiddle.net/hmarks/8L1rodg6/21/

var pos = $('#center').position(),
    radiusSat = $('#sat1').width() * 0.5,
    radius = $('#center').width() * 0.5,
    cx = pos.left + radius,
    cy = pos.top + radius,
    x, y, angle = 0, angles = [],
    spc = 360 / 8,
    deg2rad = Math.PI / 180,
    i = 0;

for(;i < 8; i++) {
    angles.push(angle);
    angle += spc;
}

/// space out radius
radius += (radiusSat - 25);

loop();

function loop() {

    for(var i = 0; i < angles.length; i++) {

        angle = angles[i];

        x = cx + radius * Math.cos(angle * deg2rad);
        y = cy + radius * Math.sin(angle * deg2rad);

        $('#sat' + i).css({left:x - radiusSat, top:y - radiusSat});

        angles[i] = angles[i] + 1;
        if (angles[i] > 360) angles[i] = 0;
    }

    requestAnimationFrame(loop);
}

它目前无休止地旋转，但希望完成以下任务：

所以最终需要它在旋转45度后暂时暂停，并且左上角和右下角将分配一个活动类，并且每次圆圈旋转45度时中心的单词都会改变。

如果需要，可以使用最新版本的jQuery。

Answer 1

嘿，我对你遇到的最初问题做了一些改变。我不确定你什么时候想要添加课程＆＃34; active＆＃34;。但是从代码中我得出结论，角度为45和225的任何元素都应该具有活动的类。那么为什么不使用

div [data-angle =＆＃34; 225＆＃34;]和div [data-angle =＆＃34; 45＆＃34;]用于选择它们？

关于暂停它们，你需要做的就是在达到角度时不要调用requestAnimationFrame

GetModuleHandle

我附上了一个样本小提琴。 https://jsfiddle.net/Lmcn7brm/