Javascript 如何对requestAnimationFrame（）进行独立于刷新率的计时

我有一种情况，我想在1秒内将600px宽div的宽度设置为0px。我可以使用

requestAnimationFrame（）

来实现这一点。但我不能100%确定动画是否需要1秒

它看起来像这样：

let width = 600;
let animation;
function animateWidth(){
  if(width <= 0){
    window.cancelAnimationFrame();
  }else{
    width -= 10; // (600px/60fps)
  }
  document.getElementById('id1').setAttribute('width', width);
  animation = window.requestAnimationFrame(animateWidth);
}
animation = window.requestAnimationFrame(animateWidth);

let width=600；
让动画；
函数animateWidth（）{
if（width测量动画开始后的时间，并将其用作宽度计算中的参考，这是这里的常见做法

使用此代码，动画将持续一秒钟，无论设备具有何种FPS

const el = document.getElementById('id1');
const start = Date.now();

function animateWidth() {
  const t = (Date.now() - start) / 1000; // 1000 - one second

  if(t >= 1) {
    el.setAttribute('width', 0);
  }
  else {
    el.setAttribute('width', 600 * (1 - t));
    window.requestAnimationFrame(animateWidth);
  }
}

animateWidth();

requestAnimationFrame
传递页面加载到回调后的时间，例如


const startValue=600；
常数endValue=0；
//当l从0变为1时，返回介于开始和结束之间的值
功能lerp（开始、结束、l）{
返回开始+（结束-开始）*l；
}
const startTime=performance.now（）；
常数持续时间秒=1；
常量元素=document.getElementById（'id1'）；
函数动画宽度（现在）{
常数timescurenstartinsonds=（现在-开始时间）*0.001；
//l在持续时间内从0变为1；
常数l=数学最小值（时间连续开始秒/持续秒，1）；
setAttribute（'width'，lerp（startValue，endValue，l））；
//如果尚未完成，请请求另一个动画帧
if（l<1）{
请求动画帧（动画宽度）；
}
}
请求动画帧（动画宽度）；
#id1{背景：红色；}
您可以使用。