requestAnimationFrame回调函数中的参数

Question

题目描述

requestAnimationFrame回调函数中的参数是什么意思？还有就是官网这一段代码什么意思？

相关代码

    const element = document.getElementById('some-element-you-want- 
    to-animate');
    let start;

    function step(timestamp) {
      if (start === undefined)
        start = timestamp;
      
      const elapsed = timestamp - start;

      //这里使用`Math.min()`确保元素刚好停在200px的位置。
      element.style.transform = 'translateX(' + Math.min(0.1 * elapsed, 200) + 'px)';

      if (elapsed < 2000) { // 在两秒后停止动画
        window.requestAnimationFrame(step);
      }
    }

     window.requestAnimationFrame(step);

Answer 1

具体参考MDN文档

window.requestAnimationFrame() 告诉浏览器——你希望执行一个动画，并且要求浏览器在下次重绘之前调用指定的回调函数更新动画。该方法需要传入一个回调函数作为参数，该回调函数会在浏览器下一次重绘之前执行

callback

下一次重绘之前更新动画帧所调用的函数(即上面所说的回调函数)。该回调函数会被传入DOMHighResTimeStamp参数，该参数与performance.now()的返回值相同，它表示requestAnimationFrame() 开始去执行回调函数的时刻。

callback的参数是一个高精度时间戳（毫秒级），就是回调执行的时间戳。