什么是 jnarwold-react-motion ？
jnarwold-react-motion 是一个 React 动画库，可以帮助我们创建具有复杂运动的可重用动画组件，提供了一些比 CSS 动画更细粒度的控制。 它使用 spring 动力学模型来创建流畅的动画。它提供了一个封装平台，可以帮助开发人员创建复杂的 React 动画。
安装 jnarwold-react-motion
你可以通过 npm 安装 jnarwold-react-motion：
npm install -S jnarwold-react-motion
创建一个简单的动画
下面是一个创建 div 元素简单脉冲动画的示例。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- ------------------------
----- ----- ------- --------------- -
-------- -
------ -
------- --------------- ------ - -- -------- ------ ----------- ---
------ --
---- --------
---------- ------------------------
----------- ------
------- -------
------ -------
----
-
---------
--
-
-
------ ------- ------使用 jnarwold-react-motion 创建复杂动画
下面是更复杂的演示。它将 Motion 组件和 Spring 组件混合使用，来创建一个侧栏菜单，当按钮被点击时，它会滑动打开或关闭。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ - ---- ------------------------
----- ------- ------- --------------- -
------------- -
--------
---------- - - ----- ----- --
----------- - -----------------------
-
-------- -
--------------- ----- ---------------- ---
-
------------- -
----- ----- - ------- ------ -------- --------
----- --------- - -
-------- -------
------------- ---- ----- ------
--------- --------
--
------ -------------- -- ---- ---------- --------------------------------
-
-------- -
------ -
---- -------- -------- ------- ------- ------- ---
------- --------------------- -------- --------- ------- ---
---------------- - ------- - -------
---------
------- -------- -- ---------------------- - - - ----- ---
------ --
---- --------
--------- -----------
----- ---------------
---- --
------ --------
----------- ----------
------------ ---- ----- ------
------- ----
------- -------
---
--------------------
------
-
---------
---- -------- ----- -- -------- ------ ------- ------- ---- -----------
------
--
-
-
------ ------- --------运行这个示例还需要安装 react-dom 和 babel-preset-react，然后通过使用 Babel 编译代码，最后在浏览器中运行。
结论
jnarwold-react-motion 是一个非常好的 React 动画库，它可以帮助我们创建复杂的动画，并为我们提供比 CSS 动画更细粒度的控制。希望这篇文章对你有帮助，让你知道如何使用 jnarwold-react-motion 创建动画组件，并且你知道如何在你的项目中使用这个库来制作复杂的动画。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056bda81e8991b448e5831