javascript呼吸元素-动画似乎在经过长时间后才会出现

这是我的第一个代码片段，作为练习的一部分，我是为了好玩而写的。我创建了一个300×300像素的长方体，其中两个角的边界半径增加或减少，以创建呼吸动画。几分钟后，动画似乎加速并抖动。 有人知道如何改进代码吗

function frame() {
  var elem   = document.getElementById('box1');
  var radius = 0;
  var id1    = setInterval(frame1, 20);
  var id2    = setInterval(frame2, 20);

  function frame1() {
    if (radius == 300) {
      clearInterval(id1);
      setInterval(frame2, 20);
    } else {
      clearInterval(id2);

      radius ++;

      elem.style.borderTopRightRadius   = radius + 'px';
      elem.style.borderBottomLeftRadius = radius + 'px';
    }

    return radius;
  }

  function frame2() {
    if (radius == 0) {
      clearInterval(id2);
      setInterval(frame1, 20);
    } else {
      clearInterval(id1);

      radius --;

      elem.style.borderTopRightRadius   = radius + 'px';
      elem.style.borderBottomLeftRadius = radius + 'px';
    }

    return radius;
  }
}

frame()

---

使用requestAnimationFrame并根据经过的时间制作动画，以及一些肮脏的数学

var elem=document.getElementByIdbox1； var半径=0； var开始； 功能框架{ ifbegin==未定义{ begin=v； } 让半径=Math.abs300+v-开始/20%600-300； elem.style.borderTopRightRadius=半径+px； elem.style.borderBottomLeftRadius=半径+px； 请求动画框架； } 请求动画框架； 框1{ 宽度：500px； 高度：500px； 背景：道奇蓝； }

---

几分钟后。。。在这几分钟内，你有没有在任何时候使该选项卡处于非活动状态？当选项卡处于非活动状态时，计时器会变慢和/或有时会跳过。您有两个计时器，延迟可能不会对它们产生完全相同的影响。最好使用单个计时器，并通过查看自上次调用以来经过了多少时间来确定您在动画中的位置，因为它可能比您指定的间隔长得多。在frame1和frame2内指定id1和id2新的间隔ID:id1=setIntervalframe1，20。此时，您正在生成新的间隔，但没有清除它们。请使用requestAnimationFrame，并根据经过的时间而不是使用javascript更改DOM元素，这对于浏览器来说非常繁重。也许可以尝试使用关键帧：谢谢。我喜欢这两种解决方案，尽管我可能会使用CSS解决方案，因为它更直接，更容易使用。在JavaScript解决方案中，我只是不懂数学，也不想使用我不懂的东西。数学其实很简单——我只是还没有弄清楚x是什么：px基本上是区间。你能给我解释一下数学吗？