requestAnimationFrame回调函数中的参数

十年一个轮回
  • 18

题目描述

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);
回复
阅读 143
1 个回答
✓ 已被采纳

具体参考MDN文档

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

callback

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

callback的参数是一个高精度时间戳(毫秒级),就是回调执行的时间戳。

你知道吗?

宣传栏