一分钟就能上手的requestAnimationFrame替代setInterval教程

发表于 分类于

requestAnimationFrame是一个新的浏览器特性，其优势在于允许浏览器主动控制并优化动画的绘制，通过这个API可以实现更可靠的定时器。

假设我们想每秒钟让一张图片出现在画布的随机位置上，传统的写法是这样的

1
2
3
4
5
6
7
8
9
10
11
setInterval(() => {
  let image = document.getElementById('image');
  document
    .getElementById('myCanvas')
    .getContext('2d')
    .drawImage(
      image,
      Math.floor(Math.random()*100),
      Math.floor(Math.random()*100)
    )
}, 1000);

使用requestAnimationFrame的写法如下所示

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let lastRefresh = 0;
let randomImage = (time) => {
  //requestAnimationFrame调用回调函数的时候，会传入一个时间戳
  //通过这个时间戳进行比对来实现自定义延迟
  if(time - lastRefresh > 1000) {
    lastRefresh = time;
    let image = document.getElementById('image');
    document
      .getElementById('myCanvas')
      .getContext('2d')
      .drawImage(
        image,
        Math.floor(Math.random()*100),
        Math.floor(Math.random()*100)
      )
  }
  //将自身作为参数传入实现重复调用
  requestAnimationFrame(randomImage);
}
//初次调用，获得time参数
//切记不能直接像randomImage()这样调用
requestAnimationFrame(randomImage);

然而不同的浏览器对这个API的实现有一些差异。有大佬写了一段多浏览器兼容代码，直接复制粘贴，在调用requestAnimationFrame之前执行即可

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
/**
  * Provides requestAnimationFrame in a cross browser way.
  * http://paulirish.com/2011/requestanimationframe-for-smart-animating/
  */
if (!window.requestAnimationFrame) {
  window.requestAnimationFrame = (function () {
    return (
      window.webkitRequestAnimationFrame ||
      window.mozRequestAnimationFrame ||
      window.oRequestAnimationFrame ||
      window.msRequestAnimationFrame ||
      function (callback) {
        window.setTimeout(callback, 1000 / 60);
      }
    );
  })();
}