介绍
React Pose 是一款用于实现动画效果的 React 库，它基于 FLIP 技术，可以帮助你轻松实现最具吸引力的动画效果。这个库建立在 React 动画的自然 API 之上，可以简单地使用马达和姿态来动画化你的 React 组件。在这篇文章中，我们将介绍如何使用 npm 包 @jesstelford/react-pose，来实现我们需要的动画效果。
安装
在使用 React Pose 时，我们需要先安装它。通过以下命令，我们可以将其安装在本地项目中：
npm install --save @jesstelford/react-pose
使用
安装完成后，我们就可以在项目中使用 React Pose 了。首先，让我们先了解一下 @jesstelford/react-pose 中最重要和最基本的概念：
Poses
姿态是我们想要达到的状态，并且我们通过它来定义动画的开始和结束状态。通俗地说，姿态就是我们要展示的那个状态。
Poser
姿态提供了一种声明式的方式来定义动画的开始和结束状态，我们还需要一个机制来驱动动画。这就是 Poser 的作用了。Poser 是一个使用姿态驱动所有动画的 React 组件。
接下来，我们将学习如何使用这些概念来创建动画。
示例代码
我们先来看一个简单的动画效果的实现。
-- -------------------- ---- -------
------ ----- ---- --------
------ ----- ---- --------------------------
----- --- - -----------
------- - -------- - --
-------- - -------- - -
---
----- --- ------- --------------- -
----- - -
---------- ----
--
-------- -
------ -
---- -------------------------- - --------- - ----------
---- --- ---- -- ---------
------
--
-
-上述代码实现了一个简单的淡入淡出的效果。我们通过 Posed 包装 div 元素，并通过定义姿态来指定不同节点的样式。我们将 isVisible 状态动态更改为控制盒子的可见性。
详解
Poses
Pose 定义了一个姿态以及他的动画属性。你可以这样定义：
const PosedComponent = posed(Component)({
pose1: {...},
pose2: {...},
...
});对于每一个 pose，可以指定一系列的属性值。 duration 指定动画的时间， delay 指定延迟的时间， easing 指定动画的函数， style 指定元素的CSS样式变化。
-- -------------------- ---- -------
----- --- ------------
-------- - -------- - --
------- - -------- -- ------ ----
---
----- --- ------- --------------- -
----- - -
---------- ----
--
-------- -
------ -
---- -------------------------- - --------- - -----------
---- --- ---- -- ---------
------
--
-
-在上面的例子中，我们定义了两个 Poses：一个是 visible，即元素渐隐动画的目标状态；另一个是 hidden，即元素渐隐动画的中间状态。它们使用 opacity 属性指定了不同的透明度值，在 hidden 动画姿态中，我们还指定了延迟时间使得效果更自然。
componentCounters
所有的元素的动画都通过 Poser 组件来驱动。姿态可以在不同的组件之间共享，因此，你可以将姿态定义为一个独立的组件，然后在其他的组件中使用。
-- -------------------- ---- -------
----- --------- - -----------
---------- -----
----- - ------ - --
------ - ------ --- --
----- - ------ --- -
---
----- --- ------- --------------- -
-------- -
------ -
-----
---------- ------------------- ----------------------
---------- ------------------- ----------------------
---------- ------------------- ----------------------
------
--
-
-上面的代码定义了一个可滑动的 Hoverable 组件，我们通过定义 init，hover 和 drag 姿态来实现不同状态的渲染。我们将颜色设置为不同的值使之区分。接着在 App 组件中，我们三个 Hoverable 组件实例。这样就可以共享 Hoverable 组件的动画设置。
Posers
Poser 是将姿态应用在元素上的组件。这个组件实现了一个 React 组件的布局和格式化，并将可重用的姿态和样式库绑定到它的元素上。每个 Poser 是一个高阶组件，用于生成具有特定姿态的 Posed 组件。你可以通过以下命令来创建：
import posed, { PoseGroup } from '@jesstelford/react-pose';
const MyComponent = posed.div({
visible: {...},
hidden: {...}
});在 MyComponent 中， Posed 组件已经被 Poser 组件处理，它可以应用于姿态。大多数情况下，Poser 组件被用来驱动 Posed 组件的动画。下面给出一个事例：
-- -------------------- ---- ------- ------ ----- ---- -------------------------- ----- ---- - ------------------------ ------ -------- --- ------ ------------------ - ----- --------- - ------------- ---------- ---- ----- ------- ----- -------- ------- -- ---
在上面的代码中，Item 组件被映射到 PosedItem 上，PosedItem 绑定了 drag, dragEnd 姿态。Poser 将它的状态传递到 PosedItem。
结束语
通过这篇文章，我们了解了如何使用 npm 包 @jesstelford/react-pose，它极大地方便了我们动画效果的实现，并且使用起来非常简单。希望这篇文章能对大家有帮助，也希望大家在使用 React Pose 时能够得心应手，开发出更加实用、美观的动画效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066bc4967216659e2442cb