Javascript requestAnimationFrame太快

我正在画布上创建简单的动画。我使用requestanimationframe来控制动画。有三个圆圈。但我只能看到3个圆圈，动画太快了。我的问题是如何减慢动画的速度以及如何显示每一帧。这是我的生活

const swing=（时间）=>{
对于（变量i=0；i<3；i++）{
圆[i]=新球（）；
圆[i]。绘制（i，圆[i]。颜色）；
}
requestAnimationFrame（swing）；
}
requestAnimationFrame（swing）；
//swing（）；
功能球（一）{
x=随机（100150）；
y=随机（40,60）；
这个半径=45；
this.color=getRandomColor（random（1,30））；
this.strokeText=“m”
ctx.clearRect（0，0，标高宽度，标高高度）；
this.draw=函数（i，颜色）{
ctx.beginPath（）；
ctx.font=“30px Verdana”；
弧（i*this.x，this.y，this.radius，0，2*Math.PI，false）；
ctx.fillStyle=颜色；
ctx.globalAlpha=0.5；
strokeText（i，i*this.x，this.y）；
ctx.fill（）；
ctx.closePath（）；
}
}

提前谢谢

---

编辑：-我正在创建类似的东西：-

只是一个简单的例子，让三个球做一些圆周运动：

//请参阅下文
// http://codepen.io/jscottsmith/pen/oWyxjp?editors=1010
const el=document.getElementById（'canvas'），
ctx=el.getContext（'2d'）；
设圆=[]；
el.width=document.body.clientWidth；
el.height=document.body.clientHeight；
常量getRandomColor=（i）=>{
让计数=30，
颜色=1，
色调=（i/计数*颜色）*360；
返回'hsla（${hue}，100%，50%，1）`
}
对于（变量i=0；i<3；i++）{
圆[i]=新球（）；
}
设角度=0；
让速度=0.02；
常量摆动=（时间）=>{
ctx.clearRect（0，0，标高宽度，标高高度）；
对于（变量i=0；i<3；i++）{
圆[i].x=圆[i].x+数学.cos（角度）*1；
圆[i].y=circle[i].y+Math.sin（角度）*2；
}
对于（var i=0；i<3；i++）{
圆[i]。绘制（i，圆[i]。颜色）；
}
角度+=速度；
requestAnimationFrame（swing）；
}
requestAnimationFrame（swing）；
//swing（）；
功能球（一）{
x=随机（100150）；
y=随机（40,60）；
这个半径=45；
this.color=getRandomColor（random（1,30））；
this.strokeText=“m”
this.draw=函数（i，颜色）{
ctx.beginPath（）；
ctx.font=“30px Verdana”；
弧（i*this.x，this.y，this.radius，0，2*Math.PI，false）；
ctx.fillStyle=颜色；
ctx.globalAlpha=0.5；
strokeText（i，i*this.x，this.y）；
ctx.fill（）；
ctx.closePath（）；
}
}
随机函数（num1，num2）{
var max=数学最大值（num1，num2）；
var min=数学最小值（num1，num2）；
返回Math.floor（Math.random（）*（max-min+1））+min；
}

#画布{
宽度：600px；
高度：600px；
}

---

动画应该是什么@李骏骁 与此类似的是，动画的每一帧似乎都是随机绘制的，因此，不会出现平移效果，只有即时位置切换。在requestAnimationFrame回调函数中，我想你需要通过基于时间的计算来控制速度。你能告诉我怎么做吗？只添加了一个简单的例子~

const swing = (time) => {
  for(var i = 0; i < 3; i++) {
    circle[i] = new ball();
    circle[i].draw(i, circle[i].color);
  }

  requestAnimationFrame(swing);
}

requestAnimationFrame(swing);
//swing();


function ball(i){
    this.x = random(100, 150);
    this.y = random(40, 60);
    this.radius = 45;
    this.color = getRandomColor(random(1, 30));
    this.strokeText = "m"  

    ctx.clearRect(0, 0, el.width, el.height);
    this.draw = function(i, color){
        ctx.beginPath();
        ctx.font="30px Verdana";
        ctx.arc(i*this.x, this.y, this.radius, 0, 2*Math.PI, false);
        ctx.fillStyle = color;
        ctx.globalAlpha = 0.5;
        ctx.strokeText(i,i*this.x,this.y);
        ctx.fill();
        ctx.closePath();
    }
}