jquery - 在具有事件类的圆形路径上暂停旋转圆圈

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 度后暂停片刻，并且左上角和右下角将被分配一个 active 类，并且每次圆圈旋转 45 度时中心的单词都会发生变化。

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

Answer 1

嘿，我对您最初遇到的问题做了一些更改。我不确定您何时要添加“事件”类。但是从代码中我得出一个结论，任何 Angular 为 45 和 225 的元素都应该激活该类。那么为什么不直接使用

div[data-angle="225"] 和 div [data-angle="45"] 用于选择它们？。

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

function loop() {
    //consider this as steps of animation
    if(angles[0] ==45) {
         pause(5500, 1); 
    } else if(angles[0] ==90) {
         pause(5500, 2); 
    }else if(angles[0] ==135) {
      pause(5500, 3); 
    }else if(angles[0] ==180) {
      pause(5500, 0);
    }else if(angles[0] ==225) {
      pause(5500, 1); 
    }else if(angles[0] ==270) {
      pause(5500, 2);
    }else if(angles[0] ==315) {
      pause(5500, 3);
    }else if(angles[0] ==0) {
      pause(5500, 0);
    }else {
            requestAnimationFrame(loop);
    }   
            for(var i = 0; i < angles.length; i++) {
        var 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});
        $('#sat' + i).attr('data-angle', angle);
        angles[i] = angles[i] + 1;
        if(angles[i] == 360) angles[i] =0;       
    }

}

function pause(time, id){   
    $(".text").hide();
  $(".text:eq("+id+")").show();  
    setTimeout(function(){
    requestAnimationFrame(loop);
  }, time); 
}

我附上了一个示例 fiddle 。 https://jsfiddle.net/Lmcn7brm/