Javascript 使用RAF围绕另一个SVG圆的圆周设置SVG圆的动画

我目前正在尝试学习如何使用requestAnimationFrame制作动画，但在了解如何在SVG圆的圆周上点到点制作动画时遇到了一些问题。我能够在目标周围找到合适的点，但是当我执行我的函数时，它会直接动画到最后一个点，当期望的效果是迭代整个点列表并按顺序动画到每个点

window.onload = function(){
    var little = document.getElementById("little");
    var big = document.getElementById("group");
    var count = 33;
    var cx = 100;
    var cy = 100;
    var r = 66;
    var px;
    var py;

    function animator(){
        for(var i=0; i<count; i++){
            px = cx + r * Math.cos(2*Math.PI*i/count);
            py = cy + r * Math.sin(2*Math.PI*i/count);
            little.setAttribute("cx", px);
            little.setAttribute("cy", py);
            requestAnimationFrame(animator);
        }
    }

        requestAnimationFrame(animator);

}

window.onload=function（）{
var little=document.getElementById（“little”）；
var big=document.getElementById（“组”）；
var计数=33；
var-cx=100；
var-cy=100；
var r=66；
var-px；
var-py；
函数animator（）{
对于（var i=0；i您不应该在
animator（）
函数中循环遍历所有值。animator函数应该自己执行一个步骤。然后调用
requestAnimationFrame（）
来安排下一次迭代


//window.onload=function（）{
var little=document.getElementById（“little”）；
var big=document.getElementById（“组”）；
var计数=33；
var-cx=100；
var-cy=100；
var r=66；
var i=0；
函数animator（）{
如果（i==计数）
返回；
var px=cx+r*Math.cos（2*Math.PI*i/count）；
var py=cy+r*Math.sin（2*Math.PI*i/count）；
little.setAttribute（“cx”，px）；
little.setAttribute（“cy”，py）；
i+=1；
requestAnimationFrame（动画师）；
} 
requestAnimationFrame（动画师）；
//}
svg{
位置：绝对位置；
排名：0；
左：0；
宽度：100%；
身高：100%；
}
.集装箱{
位置：相对位置；
身高：100%；
}

点火器
~~gee~~每次调用
requestAnimationFrame（回调）
，
回调
被堆叠在下一次屏幕刷新时应调用的函数列表中。在这里，您将在for循环的每次迭代中添加一个新回调：如果
计数
为2，则在第二帧，
animator
将被调用两次，在第三帧调用4次，类似于以指数方式吹扫CPU和内存消耗。请在循环后移动它。同样，您正在更改此for循环中单个元素的属性，这没有意义，只将其设置为最后一个值一次将具有相同的效果。非常好，先生！感谢您的反馈