在前端开发中，动效是非常重要的一部分。但是直接写动画效果的代码显然繁琐且效率低下。所以可以使用一些优秀的动画库来辅助开发。
本文将介绍一款名为 @thefoxjob/react-lottie 的 npm 包，它基于 Lottie（一个由 Airbnb 设计师创建的动画工具）并提供了 React 组件。
安装
安装 @thefoxjob/react-lottie 非常简单，只需要在终端中输入以下命令即可：
npm install @thefoxjob/react-lottie --save
使用
导入
在你的 React 组件中，用以下代码导入动画组件：
import Lottie from '@thefoxjob/react-lottie'
使用基本形式
定义一个 JSON 格式的 Lottie 动画，并把它设置为组件的 props：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ ------ ---- -------------------------
------ ------------- ---- ---------------
----- ----------- ------- --------- -
-------- -
----- -------------- - -
----- -----
--------- -----
-------------- --------------
----------------- -
-------------------- --------- ------
-
--
------ -
-----
-------
------------------------
--
------
-
-
-动态变化
将 Lottie 动画作为状态（state）保存，并在需要修改时更新它：
-- -------------------- ---- -------
------ ------ - --------- - ---- -------
------ ------ ---- -------------------------
------ -------------- ---- ---------------
------ -------------- ---- ----------------
----- ----------- ------- --------- -
------------------ -
------------
---------- - ----------- ----- --------- ----- -------------- ---------------
-
-------- -
----- -------------- - -
----- -----
--------- -----
-------------- -------------------------
----------------- -
-------------------- --------- ------
-
--
------ -
-----
-------
------------------------
------------
-----------
--------------------------------
------------------------------
--
------- ----------- -- ------------------------- ---------------------
------- ----------- -- ------------------------- ----------------------
------- ----------- -- ------------------------ --------------------------------------
------- ----------- -- ----------------------------- ------------------------ ------------------
------
-
-
-参数
options
options 是用来控制 Lottie 动画行为的对象，它可以包含以下属性：
- animationData: JSON 格式的动画数据
- path: 动画数据的 Url 地址
- renderer: ['svg', 'canvas', 'html'].render 方法，默认值为 svg
- loop: 是否循环播放，默认值为 true
- autoplay: 是否自动播放，默认值为 true
- speed: 动画播放速度，默认值为 1
- segments: 数组，定义动画播放的开始和结束点 [startFrame, endFrame]，默认值为 [0, totalFrames]
- direction: 正向播放或反向播放，1 为正向，-1 为反向，默认值为 1
- rendererSettings: 定义渲染器的属性
- progressiveLoad: 是否开启渐进式加载，默认值为 false，目前仅支持 SVG 渲染器
- preserveAspectRatio: 保持宽高比的模式，支持以下模式： xMinYMin, xMidYMin, xMaxYMin, xMinYMid, xMidYMid, xMaxYMid, xMinYMax, xMidYMax, xMaxYMax，默认值为 xMidYMid
others
- height：指定动画的高度，单位为 px
- width：指定动画的宽度，单位为 px
- isStopped：动画是否停止，默认值为 false
- isPaused：动画是否暂停，默认值为 false
结语
@thefoxjob/react-lottie 是一个非常方便的工具，用于在 React 应用程序中集成 Lottie 动画。本文已介绍了它的安装和使用，并展示了一些基本的用法和设置。希望本文能够为前端开发者提供有帮助的指引。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572a281e8991b448e8cb8