2020已经过去五分之四了，你确定还不来了解一下JS的rAF?

红太狼 2022-12-15 11:11 139阅读 0赞

不会吧，不会吧，现在都2020年了不会还真人有人不知道JS的`rAF`吧？？？

# **rAF** #

## **简介** ##

rAF是requestAnimationFrame的简称；

我们先从字面意思上理解`requestAnimationFrame`，**「request - 请求」**，**「Animation - 动画」**， **「Frame - 帧率;框架」**，`rAF`难道是JS的动画框架???，结果显而易见并不是。但确实`rAF`和动画有关系

我们先来看一下MDN官网对的`requestAnimationFrame`解释:

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

## **浏览器兼容性** ##

![27ed8032a50246bcbec700c70651184e.png][]

`requestAnimationFrame`兼容IE10及以上，这时候有人会有疑问，怎么才到IE10啊，但其实我们最常使用的CSS3 `animation`属性也是IE10之后才有的，在IE9之前想要实现动画基本使用的是`setTimeout/setInterval`实现

## **作用及用法** ##

`requestAnimationFrame`简称`rAF`,它是浏览器全局对象window的一个方法。

相比于`setTimeout`的在固定时间后执行对应的动画函数，rAF用于指示浏览器在下一次重新绘制屏幕图像时, 执行其提供的回调函数。

这也是`rAF`的最大优势–它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免`setTimeout`通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。

### **详细用法** ###

`requestAnimationFrame`语法如下:

window.requestAnimationFrame(callback)

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

**「返回值」**一个 long 整数，请求 ID ，是回调列表中唯一的标识。是个非零值，没别的意义。你可以传这个值给 window.cancelAnimationFrame() 以取消回调函数。

> DOMHighResTimeStamp 指的是一个double类型，用于存储毫秒级的时间值。这种类型可以用来描述离散的时间点或者一段时间(两个离散时间点之间的时间差)。

> performance.now()方法返回一个精确到毫秒的DOMHighResTimeStamp 。

--------------------

它的实际常见用法类似于`setTimeout`，只是不需要设置时间间隔而已。如下:

const element = document.getElementById('some-element-you-want-to-animate'); 
    let start;
    
    function step(timestamp) {  // timestamp回调函数传入的`DOMHighResTimeStamp`参数，也就是存储毫秒级的时间值  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);

上述代码的作用在每一次屏幕显示图像的更新中，都将元素向左移动1px，停在200px位置上。

### **实际使用示例** ###

**「上才艺，E G M,E G M E G M E G M」**

我们以在3000毫秒内移动1500px距离的动画为例

#### **setTimeout的实现方式** ####

以下代码通过setTimeout每10毫秒为间隔时间改变一次元素的位置以实现元素的动画效果， 当然，可以通过改变这个间隔时间来微调动画效果，可是你永远没有办法确定最优方案，因为它总会和刷新频率存在交叉。

<div id="div" style="width:100px; height:100px; background-color:#000; position: absolute;left:0; top:0;">
        
    </div>
     <script type="text/javascript"> let divEle = document.getElementById("div");  const distance = 1500; // 需要移动的距离 const timeCount = 3000; // 需要使用的时间  const intervalTime = 10; // 设置间隔时间为10ms let runCount = timeCount / intervalTime; // 相除得到运行次数 let moveValue = distance / runCount; // 每次运行移动的距离  function handler() {  let left = parseInt(divEle.style.left);  if(left >= distance) {  // 当距离左侧的距离超出需要移动的距离停止  return;  }  divEle.style.left = left + moveValue;  window.setTimeout(handler, intervalTime); }  window.setTimeout(handler, intervalTime); </script>

#### **requestAnimationFrame的实现方式** ####

**「从setTimeout切换到 requestAnimationFrame很容易，因为它们都安排了一个回调。对于连续动画，在调用动画函数之后再次调用requestAnimationFrame。」**

request 会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成(这点很像虚拟DOM不是~)，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率,这样就不会出现过度渲染的问题，保证了流畅的需求以及浏览器的完美渲染。

<div id="div" style="width:100px; height:100px; background-color:#000; position: absolute;left:0; top:0;">
        
    </div>
     <script type="text/javascript">  let divEle = document.getElementById("div");  const distance = 1500; // 需要移动的距离 const timeCount = 3000; // 需要使用的时间  function handler( time ) {  // time为rAF返回的毫秒级时间单位，当time的大于timeCount的值则停止  // time理论上是从 1 开始到timeCount定义的3000，  if(time > timeCount) {  time = timeCount;  }  // 这句代码的作用是 time理论上是从 1 至 3000  // 当到达3000的时候，time * distance / timeCount得到的一定是distance的值1500  divEle.style.left = time * distance / timeCount;  window.requestAnimationFrame( handler ); // 循环调用，渲染完成会停止 }   window.requestAnimationFrame( handler ); </script>

## **requestAnimationFrame的优点** ##

### **为什么不使用settimeout？** ###

setTimeout通过设定一个时间间隔来不断的更新屏幕图像，从而完成动图。 它的优点是可控性高，可以进行编码式的动画效果实现。

setTimeout缺点：

1.  **「造成无用的函数运行开销：」**

也就是过度绘制，同时因为更新图像的频率和屏幕的刷新重绘制步调不一致，会产生丢帧，在低性能的显示器动画看起来就会卡顿。

1.  **「当网页标签或浏览器置于后台不可见时，仍然会执行，造成资源浪费」**
2.  **「API本身达不到毫秒级的精确：」**

如果使用 setTimeout或者setInterval 那么需要我们制定时间 假设给予 (1000/60)理论上就可以完成60帧速率的动画。所以事实是浏览器可以“强制规定时间间隔的下限(clamping th timeout interval)”,一般浏览器所允许的时间再5-10毫秒，也就是说即使你给了某个小于10的数，可能也要等待10毫秒。

1.  **「浏览器不能完美执行：」**

当动画使用10ms的settimeout绘制动画时，您将看到一个时序不匹配，如下所示。

![5a16fc8eb6c2d021a4711af4b284d731.png][]

我们的显示屏一般是**「16.7ms(即60FPS)的显示频率」**，上图的第一行代表大多数监视器上显示的**「16.7ms显示频率」**，上图的第二行代表**「10ms的典型setTimeout」**。由于在显示刷新间隔之前发生了另一个绘制请求，因此无法绘制每次的第三个绘制(红色箭头指示)。这种透支会导致动画断断续续，**「因为每三帧都会丢失」**。计时器分辨率的降低也会对电池寿命产生负面影响，并降低其他应用程序的性能。

> 如果使用requestAnimationFrame可以解决setTimeout的丢帧问题，因为它使应用程序时通知(且仅当)的浏览器需要更新页面显示，渲染时间由系统处理。因此，应用程序与浏览器绘画间隔完全一致，并且仅使用适当数量的资源。

### **requestAnimationFrame的好处** ###

相比于`setTimeout`的在固定时间后执行对应的动画函数，`requestAnimationFrame`用于指示浏览器在下一次重新绘制屏幕图像时, 执行其提供的回调函数。

*  **「使浏览器画面的重绘和回流与显示器的刷新频率同步」**它能够保证我们的动画函数的每一次调用都对应着一次屏幕重绘，从而避免`setTimeout`通过时间定义动画频率，与屏幕刷新频率不一致导致的丢帧。
 *  **「节省系统资源，提高性能和视觉效果」**在页面被置于后台或隐藏时，会自动的停止，不进行函数的执行，当页面激活时，会重新从上次停止的状态开始执行，因此在性能开销上也会相比`setTimeout`小很多。

## **兼容问题** ##

目前的时间点上，几乎所有的浏览器现行版本都支持了requestAnimationFrame函数。但在一部分浏览器上还需要加上兼容性前缀。 下面这是比较全面的方法用来使requestAnimation兼容各浏览器:

然后，我们就可以以使用setTimeout的感觉使用requestAnimationFrame方法制作动画啦！

## **相关链接** ##

*  [张鑫旭 - requestAnimationFrame][- requestAnimationFrame]
 *  [MDN - requestAnimationFrame][]
 *  [Microsoft - requestAnimationFrame][]
 *  个人网站：[zhaohongcheng.com][]
 *  GitHub：[https://github.com/Tzlibai][https_github.com_Tzlibai]

# **结尾** #

如有疑问，可在下方留言，会第一时间进行回复

谢谢你愿意花时间阅读这篇文章，希望可以对你有所帮助！

> 我曾踏足山巅，也曾跌落谷底，两者都让我受益良多。

[27ed8032a50246bcbec700c70651184e.png]: /images/20221123/146eeb2d913344c382a6e2e0f5fe144f.png
[5a16fc8eb6c2d021a4711af4b284d731.png]: /images/20221123/3e7602aab1584fd2bf75cbf51cd9a6f5.png
[- requestAnimationFrame]: https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/
[MDN - requestAnimationFrame]: https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
[Microsoft - requestAnimationFrame]: https://docs.microsoft.com/en-us/previous-versions/windows/internet-explorer/ie-developer/dev-guides/hh920765%28v=vs.85%29?redirectedfrom=MSDN#browser-support
[zhaohongcheng.com]: https://zhaohongcheng.com
[https_github.com_Tzlibai]: https://github.com/Tzlibai