在前端开发中，动画是不可或缺的一个环节，而在 React 的开发中，有不少关于动画实现的 npm 包被广泛使用。而今天我们要讲的就是其中一款 npm 包——react-animation-frame。
什么是 react-animation-frame
react-animation-frame 是一个基于 requestAnimationFrame 的 React 动画库，可以轻松实现各种复杂的动画效果，例如自定义动画时间、缓动函数、动画循环以及暂停与取消功能等。此库体积较小，且可以方便地集成进现有的 React 项目中使用。
安装
在项目中使用 npm 或 yarn 进行安装：
npm install react-animation-frame --save
yarn add react-animation-frame
使用
简单示例
首先我们来看一个最简单的例子——在组件中实现一个简单的渲染动画效果。
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ------------------------
----- ----------- ------- --------------- -
----- - - ------ - --
-------- - -- -- -
--------------- ------ ---------------- - - ---
--
-------- -
------ --------------- ------------------------------------------------------------
-
-在上述示例中，AnimationFrame 是一个基于 requestAnimationFrame 的 React 组件，当它挂载到 DOM 中时，它的 onFrame 回调函数会被反复地调用，我们可以在这个回调函数中实现我们所需的渲染逻辑。
自定义时间
react-animation-frame 允许我们在组件内设置动画的时间，以满足各种不同的场景需求。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
----- - - ---------- ---- --
------- - -- -- -
-- --------------
--------------- ---------- ---------- ---
--
-------- - -- -- -
-- -----------
----- ------- - ---------- - ---------------------
-- ------------
----- ------- - ------- - -----
-- ----
--------------- ------ ------------------ - ---- ---
--
-------- -
------ -
---------------
--------------- -- ---------- ---- --
----------------------
-----------------------
-
-------------------
-----------------
--
-
-在上述示例中，我们通过在组件中使用 duration 属性来设置动画执行的时间，然后在 onUpdate 回调函数中根据当前执行的时间计算百分比并更新组件状态。
缓动函数
缓动函数（Easing）是在动画效果中经常进行调整的一个参数，它可以实现一些比较自然的动画效果，例如匀速运动、加速运动和弹跳运动等。
react-animation-frame 提供了 easing 属性来设置缓动函数，它支持所有常见的缓动函数，例如：
- 线性缓动：
linear - 加速缓动：
easeIn,easeOut,easeInOut - 弹跳缓动：
bounceIn,bounceOut
-- -------------------- ---- -------
------ - ------ - ---- ------------------------
----- ----------- ------- --------------- -
----- - - ---------- ---- --
------- - -- -- -
-- --------------
--------------- ---------- ---------- ---
--
-------- - -- -- -
-- -----------
----- ------- - ---------- - ---------------------
-- ------------
----- ------- - ------- - -----
-- -- ----------- ----------
----- ------------ - ----------------------------
-- ----
--------------- ------ ----------------------- - ---- ---
--
-------- -
------ -
---------------
---------------
----------------------
-----------------------
-------------------- -- ------
-
-------------------
-----------------
--
-
-在上述示例中，我们通过设置 easing 属性来指定使用的缓动函数，同时在 onUpdate 回调函数中使用 Easing 中提供的计算函数来计算缓动后的百分比。
停止与取消动画
当我们需要动态控制动画的停止或取消时，我们可以使用 stop 和 cancel 方法来实现。
-- -------------------- ---- -------
----- ----------- ------- --------------- -
--------- - -----
----- - - ------ - --
-------------- - -- -- -
-- ----------------
-- ---------------- -
----------------------
-
--------------- ------ - ---
-------------- - ----------------------------------------------------
--
-------- - -- -- -
-- ------------------
-- ----------------- - ---- -
--------------- ------ ---------------- - - ---
-------------- - ----------------------------------------------------
-
--
------------- - -- -- -
-- --------------
----------------------
--
--------------- - -- -- -
-- ------------- -
------------------------
--------------- ------ - ---
--
-------- -
------ -
--
------- -------------------------------------------
------- ------------------------------------------
------- --------------------------------------------
--------------------------------
---
--
-
-在上述示例中，我们通过调用 stop 和 cancel 方法来实现动画的暂停与取消，同时在 onUpdate 函数中也需要判断当前的执行进度是否达到了预设的终点，若是，则停止动画的递归调用。这样就可以实现动画的停止或取消，同时也将执行进度保存下来了。
结语
react-animation-frame 提供了一种非常方便的方式来实现 React 动画，它支持各种自定义属性和方法，可以非常灵活地应对不同的动画需求。同时，它也可以和其他的 React 动画库结合使用，例如 react-transition-group、react-spring 等，搭配使用可以实现丰富的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f0d9381d61a3540d75