理解requestAnimationFrame和cancelAnimationFrame

待我称王封你为后i 2022-05-22 06:18 303阅读 0赞

window.requestAnimationFrame() 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画。该方法使用一个回调函数作为参数，这个回调函数会在浏览器重绘之前调用。

注意：若您想要在下次重绘时产生另一个动画画面，您的回调例程必须调用 requestAnimationFrame()。

回调函数会被传入一个参数，DOMHighResTimeStamp，指示当前被 requestAnimationFrame() 排序的回调函数被触发的时间。即使每个回调函数的工作量的计算都花了时间，单个帧中的多个回调也都将被传入相同的时间戳。该时间戳是一个十进制数，单位毫秒，最小精度为1ms(1000μs)。

语法：

window.requestAnimationFrame(callback);

参数：callback

一个指定函数的参数，该函数在下次重新绘制动画时调用。这个回调函数只有一个传参，DOMHighResTimeStamp，指示requestAnimationFrame() 开始触发回调函数的当前时间（performance.now() 返回的时间）。

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

### requestAnimationFrame()的特点： ###

*  requestAnimationFrame会把每一帧中的所有DOM操作集中起来，在一次重绘或回流中就完成，并且重绘或回流的时间间隔紧紧跟随浏览器的刷新频率
 *  在隐藏或不可见的元素中，requestAnimationFrame将不会进行重绘或回流，这当然就意味着更少的CPU、GPU和内存使用量
 *  requestAnimationFrame是由浏览器专门为动画提供的API，在运行时浏览器会自动优化方法的调用，并且如果页面不是激活状态下的话，动画会自动暂停，有效节省了CPU开销（举个例子比如：页面最小化了，或者被Tab切换了。页面是不会重绘的，自然，requestAnimationFrame也不会调用（没通知啊）。页面绘制全部停止，资源高效利用。）

### 兼容性： ###

PC端

<table style="margin:0px;padding:0px;border-width:1px 0px 0px 1px;border-style:solid;border-color:transparent;width:878px;max-width:100%;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Feature</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Chrome</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Firefox (Gecko)</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Internet Explorer</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Opera</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Safari (WebKit)</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">Basic support</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">10&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>24 [3]</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">4.0&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'moz' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">moz</a></span>&nbsp;[1][4]<br>23 [2]</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">10.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;"><span title="Please update this with the earliest version of support." style="margin:0px;padding:0px;border:0px;color:rgb(136,136,136);">(Yes)</span>&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with '-o' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">-o</a></span><br>15.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">6.0&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>6.1</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">return value</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">23</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;"><a href="https://developer.mozilla.org/en-US/Firefox/Releases/11" title="Released on 2012-03-13." style="color:rgb(63,135,166);margin:0px;padding:0px;border:0px;" rel="nofollow">11.0</a>&nbsp;(11.0)</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">10.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">15.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">6.1<br></td> 
  </tr> 
 </tbody> 
</table>

移动端：

<table style="margin:0px;padding:0px;border-width:1px 0px 0px 1px;border-style:solid;border-color:transparent;width:878px;max-width:100%;color:rgb(51,51,51);font-family:'Open Sans', arial, 'x-locale-body', sans-serif;"> 
 <tbody style="margin:0px;padding:0px;"> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Feature</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Android</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Android Webview</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Firefox Mobile (Gecko)</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">IE Phone</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Opera Mobile</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Safari Mobile</th> 
   <th style="font-style:inherit;margin:0px;padding-top:2px;padding-right:4px;padding-left:4px;border-style:none;font-weight:inherit;font-family:'x-locale-heading-primary', zillaslab, Palatino, 'Palatino Linotype', 'x-locale-heading-secondary', serif;background:0px 0px;line-height:1;">Chrome for Android</th> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">Basic support</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;"><p style="margin-bottom:24px;border:0px;max-width:100%;">4.3&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;font-size:12px;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>4.4</p></td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">4.3&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>4.4</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;"><p style="margin-bottom:24px;border:0px;max-width:100%;">11.0 (11.0)&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;font-size:12px;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'moz' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">moz</a></span><br>23</p></td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">10.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">15.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;"><p style="margin-bottom:24px;border:0px;max-width:100%;">6.1&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;font-size:12px;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>7.1</p></td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;background:rgb(255,255,255);vertical-align:top;">18&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span>25 [3]</td> 
  </tr> 
  <tr style="margin:0px;padding:0px;border-top:0px;"> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;"><code style="font-style:inherit;margin:0px;padding:0px 2px;border:0px;font-weight:inherit;background-color:rgba(220,220,220,.5);font-family:consolas, 'Liberation Mono', courier, monospace;">requestID</code>&nbsp;return value</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">4.4</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">4.4</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">11.0 (11.0)&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'moz' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">moz</a></span></td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">10.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">15.0</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">6.1&nbsp;<span title="prefix" style="margin:0px 0px 0px 10px;padding:.45em .35em .3em;border-width:0px 0px 0px 4px;border-left-style:solid;border-color:rgb(246,183,60);min-width:20px;vertical-align:baseline;background:rgb(255,243,212);font-family:Helvetica, arial, sans-serif;line-height:normal;"><a href="https://developer.mozilla.org/zh-CN/docs/Web/Guide/Prefixes" title="The name of this feature is prefixed with 'webkit' as this browser considers it experimental" style="color:rgb(153,0,0);margin:0px;padding:0px;border:0px;" rel="nofollow">webkit</a></span><br>7.1</td> 
   <td style="margin:0px;padding:5px;border-color:rgba(212,221,228,.25);font-size:12px;vertical-align:top;">&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

## window.cancelAnimationFrame ##

取消一个先前通过调用window.requestAnimationFrame()方法添加到计划中的动画帧请求.

参数：

*  先前调用window.requestAnimationFrame()方法时返回的ID.

注意：这是一个实验中的功能，此功能某些浏览器尚在开发中，请在不同浏览器中适合使用的前缀。

在 Chrome 中正确取消回调的调用目前是 window.cancelAnimationFrame()。

兼容性不是特别的理想，所以，下面进行了一个封装，解决兼容性问题：

参考文章：[requestAnimationFrame][]

另外如果觉得乏味难懂的话，建议看看[张鑫旭-requestAnimationFrame][-requestAnimationFrame],浅显易懂

[requestAnimationFrame]: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/requestAnimationFrame
[-requestAnimationFrame]: https://www.zhangxinxu.com/wordpress/2013/09/css3-animation-requestanimationframe-tween-%E5%8A%A8%E7%94%BB%E7%AE%97%E6%B3%95/