需求：

  • 使用setInterval实现div从左往右移动
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

const box = document.querySelectorAll(".box")[0];
let left = 0;
function boxMoving() {
  if (left > 200) {
    clearInterval(timer);
  } else {
    left++;
    box.style.left = left + "px";
  }
}
let timer = setInterval(boxMoving, 1000 / 120);
  • 在 CSS3 动画出来以前，我们通常使用 JS 来实现动画效果，即使有了 CSS 动画，我们很多动画效果还是得依赖 JS。而 JS 实现动画得两大利器便是 setTimeout 和 setInterval，因为我们动画的原理就是不停地刷新图像，而定时器可以帮我们做这一操作。
  • 代码很简单，就是让 div 元素向右移动 1px。然后我们开启定时器不断重复该函数，需要注意的是，我们将函数执行的频率（1000/120ms）调为了差不多和屏幕刷新率一样，即 120Hz 的屏幕刷新率。

存在问题：

  • setInterval 是异步的，也就是意味着 JS 代码执行的时候会将它放入异步队列中，所以它的执行时间并不确定。

  • 屏幕刷新率是不定的，现在各大厂家的屏幕刷新率有 30Hz、60Hz、90Hz、120Hz 等等，以后还会更多，但是我们传入 setInterval 的时间间隔是固定的，这就有可能造成动画的执行与屏幕的刷新率不匹配，从而导致在不同设备上的动画流畅度不同，产生跳帧或卡帧的现象

  • setInterval 会一直在后台执行，即使我们访问其它页面时。

产生背景：

  • 前面我们介绍的 setInterval 是我们使用 JS 实现动画常用的手段，不可否认，在以前确实可以这样使用，也是最好的办法。

  • 但是我们也需要正面这些问题，特别是随着电子设备的不断更新换代，屏幕的刷新率也出现很多种的情况下，如果继续使用定时器来实现动画，很可能会造成动画的卡顿以及性能的消耗。

  • requestAnimationFrame API 就非常完美的解决了定时器实现动画的各种问题。

是什么：

  • 是一个原生API，接收一个回调函数作为参数，返回一个ID，用于cancelAnimationFrame(ID)
  • 回调函数会在屏幕刷新的时候调用，由系统来决定回调函数的执行时机
  • 不会在后台一直执行，它会在页面出现的时候才会执行，比如 document.hide 为 true 的时候，而我们的定时器是一直会执行的。可以节省 CPU 和 GPU 等等。

重新实现需求：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const box = document.querySelectorAll(".box")[0];
let left = 0;
function boxMoving() {
	if (left > 200) {
		cancelAnimationFrame(timer);
	} else {
		left++;
		box.style.left = left + "px";
		// 请求动画帧，即屏幕刷新的时候再次执行
		requestAnimationFrame(boxMoving);
	}
}
let timer = requestAnimationFrame(boxMoving);

存疑：

刚好笔记本显示器的刷新率是120Hz，外接屏幕的刷新率是60Hz，可以很清晰看出二者差距

这里有一个问题

动画运行的单位是px

那么就会导致刷新率越高，动画速度就越快？？？