在前端项目开发中，我们经常会遇到多个动画同时运行的情况，但由于不同浏览器的刷新率不同，导致动画运行速度不一致，这时就需要通过一些方式去解决这个问题。而 npm 包 shim-raf 就是解决多个动画运行时间差的工具之一。
本文将为大家介绍 shim-raf 的使用方法以及其相关知识。
什么是 shim-raf？
在学习 shim-raf 之前，我们先来了解一下 requestAnimationFrame 。
requestAnimationFrame 是 HTML5 中新增的 API，其作用是优化执行 JS 动画时浏览器的性能，因为它可以在浏览器优化绘制之前调用指定的回调函数，通过这个 callback 函数，我们可以进行下一步的动画操作。
但是，当我们用 requestAnimationFrame 来执行多个动画时，会发现这些动画的开始和结束时间点不同，这就导致了多个动画的运行时长不相同，从而出现了动画时间错乱的问题。
而 shim-raf 就是为了解决这个问题而产生的 npm 包，它跟 requestAnimationFrame 配合使用，将所有的动画合成为一次调用，从而使得所有动画的开始和结束时间点相同。
shim-raf 的使用方法
在使用 shim-raf 之前，我们需要了解一下 raf 的概念。raf 全称为 requestAnimationFrame ，是一种优化浏览器动画的 API。
在安装了 shim-raf 之后，我们可以在代码中这样进行引入：
import raf from 'shim-raf';
我们可以用 raf 直接替代 requestAnimationFrame 来使用，例子如下：
-- -------------------- ---- ------- -- --- ------------------------ -- - -------------------- -- -- --- ------ -- - -------------------- --
在这个例子中，我们可以看到 raf 与 requestAnimationFrame 的使用方式基本一致，只是将 requestAnimationFrame 替换成了 raf。
shim-raf 的深入理解
除了上述简单的使用方法，我们也需要更加深入地了解 shim-raf。
我们先来看一下 raf 的源码：
-- -------------------- ---- -------
--- -------- - --
--- ------- - ------ ------ --------- -----
--- ---- - - -- - - -------------- -- ------------------------------ ---- -
---------------------------- - ----------------- - -------------------------
--------------------------- - ----------------- - ----------------------- -- ----------------- - -------------------------------
-
-- ------------------------------- -
---------------------------- - ------------------ -------- -
--- -------- - --- -----------------
--- ---------- - ----------- -- - --------- - -----------
--- -- - ---------------------------- - ----------------- - ------------ -- ------------
-------- - -------- - -----------
------ ---
--
-
-- ------------------------------ -
--------------------------- - ------------ -
-----------------
--
-
------ ------- ------------ -
------ ---------------------------- - -------------------------------- - --------------------- ----
-我们可以发现，shim-raf 的实现方法就是将 window.setTimeout(fn, 16) 和 window.requestAnimationFrame(fn) 进行一次整合并输出，这样就可以使所有动画在同一个时间点开始执行。
我们也可以在代码中直接使用 requestAnimationFrame(now, el) 和 requestAnimationFrame.cancel(id) 来进行调用。
shim-raf 的示例代码
在示例代码中，我们将通过一个小例子来演示 shim-raf 的使用方法，帮助读者更好地理解实现过程。
HTML
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------- ----------
-------
---- -
----------- -----
------ ------
------- ------
--------- ---------
-
---- -
----------- -----
------ ------
------- ------
--------- ---------
-
--------
-------
------
---- ---------------
---- ---------------
------- --------------------------
-------
-------JavaScript
-- -------------------- ---- -------
------ --- ---- -----------
----- ---- - -------------------------------
--- --- - --
--- ------
----------
-------- --------------- -
-- -------- ----- - ----------
----- -------- - --------- - ------
--- -- -------- - ---
-------------- - --- - -----
-- ---- - ---- -
----------
- ---- -
--- - --
----- - -----
----------
-
-这段代码会在页面上创建两个 div 元素（一个大块、一个小块），并对小块进行上下移动的动画效果。
在这个示例代码中，我们使用了 raf 来替代 requestAnimationFrame 函数，但在使用的过程中，我们可以发现块的运动状态是更流畅的。这也证明了 shim-raf 的确可以解决多个动画运行时间差的问题。
总结
在前端开发中，动画性能的优化是非常重要的，而 shim-raf 正是一个可以优化浏览器动画性能的工具。通过学习本文提供的使用方法和示例代码，希望能对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005671b81e8991b448e374d