近年来，动画在前端开发中越来越受到重视，因为它不仅能够增加页面的视觉效果，还能提高用户的交互体验。而今天我们要介绍的就是一个优秀的 React 动画库——react-hero-animation。
什么是 react-hero-animation？
React Hero Animation 是一个 React 动画库，可以让你快速地为你的 React 应用添加漂亮的动画效果。它是一个具有极高自定义性的库，使得使用者可以自由地控制每一个元素的动画过程，同时相对于其他 React 动画库，它的代码量也远远少于其他的库。
如何安装和使用 react-hero-animation？
首先，你需要先安装 react-hero-animation：
npm install react-hero-animation
安装完成后，你需要引入并注册其提供的 Provider 组件，同时在 Provider 内部包裹你需要进行动画的元素：
-- -------------------- ---- -------
------ - ----------------- - ---- ----------------------
-------- ----- -
------ -
-------------------
---- --------------------
---- ----------------------
------
--------------------
-
-接下来，你需要在元素中绑定 Animation 组件：
-- -------------------- ---- -------
------ - --------- - ---- ----------------------
-------- ----- -
------ -
-------------------
---- --------------------
---------- --------------- --------------------
---- ------------------------------
------------
------
--------------------
-
-通过 Animated 组件的 className 属性来选定需要进行动画的元素，method 属性则用于指明动画方向。这里我们以 translateY 为例，可以使得元素在垂直方向上进行动画。之后你可以根据自己的需要调整其他属性来控制动画效果。
动画效果的自定义
react-hero-animation 常用的自定义属性主要有以下几个：
method
用于指出动画方向。包括 translateX、translateY、scale、rotate 等。
duration
指出动画过程的持续时间，单位为秒。默认值为 0.35s。
delay
动画开始的延迟时间，单位为秒。默认值为 0s。
timingFunction
指出动画过程的时间轨迹。默认值为 ease。
from
动画开始时的状态，可选值包括 initial 和 final。默认为 initial。
to
动画结束时的状态，可选值包括 initial 和 final。默认为 fainal。
steps
动画过程中各个过程的间隔步数。
scale
动画的缩放比例，可以使用数组来设定 x、y 各自的缩放倍数。
react-hero-animation 的示例代码
下面是一个简单的示例代码，用于演示动画效果的使用：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------------------ --------- - ---- -----------------------
------ --------------
-------- ----- -
------ -
-------------------
---- --------------------------
------------- ---------
-----------------------------
------
---------- --------------- ------------------- -------------- ----------------------
---- ------------------------
-------- ---------------
-------- --- -- ------ ------ ---- ---------- -----------
------- ----------- -- ----------- ---------------------------
------
------------
--------------------
--
-
------ ------- ------ -------------------- ---- ------- ---- - -------------- ----- ----------- - --- ---- ------- -- -- ----- ------- ----- ------ ------ ------- ------ ----------------- -------- ----------- --- ---- ----- - ---- ------------- ----------- ------- --------- --------- ----- ---- ---- ---- ---------- --------------- ------ - ---- --- ---------- ----- ------ ------ - ---- -- ---------- ----- ------ ------ -------- ---- - ---- ------- ------- -------- ----------- ----- ---------- ----- ------ ------ ----------------- -------- ------- ----- -------------- ----- ------ ------ ------- ----- ----------- --- ----- ----- - ---- ------------- ----------------- -------- ---------- ----------- -
这里我们借助一个简单的基础样式，为 Animation 组件添加 translateY 方向上的缩放动画效果。你也可以根据自己的实际需求进行自定义！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005583b81e8991b448d56c6