什么是 npm 包 raf-plus？
npm 包 raf-plus 是 requestAnimationFrame（以下简称 RAF）的增强版。RAF 是 Web API 提供的一种动画渲染方式，优于以往的定时器，它的渲染速率在不同环境下保持稳定，实现更为流畅的动画效果。但是 RAF 也存在一些缺点：
- 只有在浏览器窗口处于活动状态时才会触发渲染，如果窗口被最小化或隐藏了，那么 RAF 将不再工作。
- RAF 的执行间隔时间是不确定的，它受到浏览器性能、帧率设置以及环境的影响，可能会出现卡顿的情况。
RAF-Plus 就是解决这些问题的增强版，它在 RAF 基础上进行了优化和改进，加入了一些新功能，例如：
- 让 RAF 在窗口不可见时依然触发渲染。
- 指定 RAF 执行最小间隔时间，保证动画的流畅性和稳定性。
- 可以在 IE9+ 浏览器中使用。
raf-plus 的使用
在使用 raf-plus 之前，需要在项目中引用 raf-plus 包。打开终端，输入以下命令安装 raf-plus：
npm install raf-plus --save
安装完成后，即可在代码中引用 raf-plus：
import RAF from 'raf-plus';
基本用法
raf-plus 最基本的用法是传入一个要执行的函数，它会在每一帧都执行这个函数：
RAF(() => {
// 这里是要执行的函数
});灵活控制执行速率
RAF-Plus 允许你指定帧率，从而控制执行速率。比如你想指定每秒 60 帧执行一次，可以这样写：
RAF.setFps(60);
如果要取消帧率限制，可以把帧率设置为 0：
RAF.setFps(0);
取消执行
如果希望在某个时刻停止函数的执行，可以使用 cancel 方法：
const handle = RAF(() => {
// 这里是要执行的函数
});
// 执行 5 秒后取消
setTimeout(() => {
RAF.cancel(handle);
}, 5000);禁用 raf-plus
在某些情况下，您可能不需要使用 raf-plus，可以将 raf-plus 禁用。
RAF.disable();
启用 raf-plus
如果想要解除禁用，将其重新启用，请使用以下方式：
RAF.enable();
示例代码
让我们来看一个示例代码，使用 raf-plus 实现一个简单的动画：
-- -------------------- ---- -------
------ --- ---- -----------
--- ---- - --
-------- ------ -
---- -- --
-- ----- -- --- -
-------
-
----- --- - -------------------------------
------------------- - ------------------------
----------
-
----------这个示例代码实现一个盒子从左侧向右侧移动 50 像素的动画，每帧移动 1 像素。在 RAF 执行 move 函数时，会不断更新盒子的位置，直到盒子移动了 50 像素时停止执行。
结语
raf-plus 是一个非常实用的库，它可以提高网站性能并提供更流畅的动画效果。在使用时需要适当了解和掌握其 API，掌握好 API 后可以让你轻松实现各种动画效果。各位前端开发者，赶紧试试吧！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d4b81e8991b448db139