介绍
React-easing 是一个 React 动画库，它通过 easing 函数让你创建更加自然的动画效果。这个库非常小巧，压缩后只有不到 1KB。
通过使用 React-easing，你可以让你的 React 组件关注于它们的状态，而不是它们应该如何进行动画处理。
安装
在你的项目中使用 npm 进行安装：
npm install react-easing
使用
React-easing 导出了一个 useEasing 钩子，该钩子可将 easing 函数应用于动画。以下是一个简单的示例：
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - --------- - ---- ---------------
----- ------- - -- -- -
----- --------- ----------- - ----------------
----- -------- ---------- - --------------------------
----- ------- - ------------------ -
-------
--------- ----
------ ------- - - - ----
---
------ -
-----
------- -------------- ----------- -- ---------------------------
------- --------------------------------------
------- ----------------------------------------
------- --------------------------------------------
------- ----------------------------------------
------- ------------------------------------------
------- ----------------------------------------------
------- ----------------------------------------
------- ------------------------------------------
------- ----------------------------------------------
------- ----------------------------------------
------- ------------------------------------------
------- ----------------------------------------------
------- --------------------------------------
------- ----------------------------------------
------- --------------------------------------------
------- --------------------------------------
------- ----------------------------------------
------- --------------------------------------------
------- --------------------------------------
------- ----------------------------------------
------- --------------------------------------------
------- --------------------------------------
------- ----------------------------------------
------- --------------------------------------------
---------
--- --
------- ----------- -- -------------------------------------
--- --
----
--------
-------- --------
--------- -----------
---- --
----- --
------ -------
------- -------
----------- -------- -- ---- ------
----------- -------- ------
--
--
------
--
--此示例创建了一个按钮，在此按钮上单击时，切换了状态变量 visible。重要的是要注意 {opacity: display} 如何在动画期间应用于 div，display 变量由 useEasing 钩子返回。
useEasing 钩子的第一个参数是当前值。如果您想在组件中使用 useState，只需将其传递给 useEasing 即可。第二个参数是一个选项对象，您可以使用它来传递要应用的 easing 函数、持续时间和延迟。
开始使用 useEasing 钩子时，最好从 easeInOutSine 开始并研究它。随着时间的推移，您会了解有关这些 easing 函数的更多信息。
现在您可以直接使用 useEasing 钩子在您的 React 组件中应用 easing 函数进行动画了。
总结
React-easing 包提供了一种简单而有效的方式来将 easing 函数应用于您的 React 组件的动画处理中。通过使用这个包，您可以使您的 React 组件放心处理状态，而不会类似 Jquery 插件那样担心那让人头痛的动画。希望这篇文章可以帮助您了解使用 npm 包 react-easing 的方式，并使您的项目中的动画更加流畅和优美。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568481e8991b448d34ec