简介
Adobe After Effects可能是一种直观的生成网络动画的方式，但在将这些动画转换为网络应用程序方面一直存在问题。通常需要使用第三方程序从After Effects导入动画。
其中一个程序是[Lottie](由Airbnb Design开发的https://airbnb.io/lottie/)，。它允许您以轻量级和灵活的格式实时使用这些动画。Lottie从一个名为Bodymovin的After Effects扩展程序中获取JSON数据，并将其转换为网络上可用的动画。
绘制时，一个点在风格化的乐天徽标上移动的动画图像
在本文中，我们将探索如何使用Lottie向我们的Reaction应用程序添加动画。为了实现这一点，我们将使用一个名为`action-lottie‘的NPM包，从Bodymovin导出的JSON文件生成可查看的动画。
<$>[备注] 注意： 由于我们将重点放在应用程序端，我们不会讨论这些动画是如何在After Effect中创建的，而是使用由设计师在LottieFiles.)上创建和开源的动画如果你想使用After Effect上的动画，你可以使用After Effects的Bodymovin插件将它们导出到JSON。 <$>
在本教程中，我们将构建一个Reaction应用程序，该应用程序由两种类型的Lotty组成，一种是常规的，另一种是根据状态中的某些值控制动画的。
如果您想查看最终的代码，请查看CodeSandbox example.
前提条件
要完成本教程，您需要：
- 本地安装node.js，可按照如何安装node.js并创建本地开发Environment.
从LottieFiles下载Lottie JSON文件需要创建一个免费帐户。
本教程已使用Node v14.4.0、npm v6.14.4、react v16.13.1和react-lottie v1.2.3进行了验证。
第一步-设置项目
我们将使用create-react-app创建我们的应用程序：
1npx create-react-app lottie-demo
这将为我们的应用程序创建一些样板代码，并配置我们的REACT开发环境。打开lottie-demo目录，开始编码：
1cd lottie-demo
现在，让我们安装依赖项action-lottie。为此，在终端中运行以下命令：
1npm install react-lottie
现在，让我们添加我们的动画。
第二步-下载样片Lotties
我们将从LottieFiles.)获取我们的示例动画导航到该站点并创建一个免费帐户。
LottieFiles让你可以访问全球设计师精心策划的动画库。它还提供了一个测试、上传和共享您自己的动画的平台。
屏幕截图
浏览动画，必要时调整设置，当您对所拥有的内容感到满意时，单击 下载JSON 以获取动画。
在我们的应用程序的src目录中，创建一个lotties子目录。将下载的JSON文件放在lotties目录下。
现在，我们准备好创建显示这些动画的组件。
第三步-创建不受控制的彩票
动画可以自由运行，也可以由状态中的数据操纵。首先，让我们看一下第一个案例，并创建一个导入并渲染Lottie的动画。
在我们的应用程序的src目录中，创建一个Components子目录。
在Components目录下创建一个名为UnControledLottie.jsx的文件，并在其中放置以下代码：
1[label src/components/UncontrolledLottie.jsx]
2import React, { Component } from 'react';
3import Lottie from 'react-lottie';
4import animationData from '../lotties/4203-take-a-selfie.json';
5
6class UncontrolledLottie extends Component {
7 render() {
8 const defaultOptions = {
9 loop: true,
10 autoplay: true,
11 animationData: animationData,
12 rendererSettings: {
13 preserveAspectRatio: 'xMidYMid slice',
14 },
15 };
16
17 return (
18 <div>
19 <h1>Lottie</h1>
20 <p>Base animation free from external manipulation</p>
21 <Lottie
22 options={defaultOptions}
23 height={400}
24 width={400}
25 />
26 </div>
27 );
28 }
29}
30
31export default UncontrolledLottie;
在本例中，4204-take-a-selfie.json是下载的Lottie的JSON文件。将该文件替换为您下载的任何图像。
现在，让我们研究一下配置中提供的信息。您会注意到我们传递了一个options prop给Lottie组件;它包含了要呈现的动画的配置数据。这包括：
AnimationData-包含导出的动画数据的对象，在本例中为JSON文件Autoplay-一个布尔值，用于确定是否在准备好后立即开始播放loop-一个布尔值或数字，用于确定动画是否重复或应该重复多少次rendererSettings--渲染器的配置数据
这些只是您可以提供的部分选项。
我们还提供了我们的动画的尺寸(宽和高)作为Lottie的道具。
现在，让我们添加我们控制的Lottie。
第四步-创建受控彩票
可以在Reaction中操作Lotty，以使用状态中的数据更改它们的某些属性。在我们的例子中，我们将创建按钮来控制Lottie中的动画。
我们在Components中创建一个文件，并将其命名为ControlledLottie.jsx。在该文件中放置以下代码：
1[label src/components/ControlledLottie.jsx]
2import React, { Component } from 'react';
3import Lottie from 'react-lottie';
4import animationData from '../lotties/77-im-thirsty.json';
5
6class ControlledLottie extends Component {
7 state = { isStopped: false, isPaused: false };
8
9 render() {
10 const buttonStyle = {
11 display: 'inline-block',
12 margin: '10px auto',
13 marginRight: '10px',
14 border: 'none',
15 color: 'white',
16 backgroundColor: '#647DFF',
17 borderRadius: '2px',
18 fontSize: '15px',
19 };
20
21 const defaultOptions = {
22 loop: true,
23 autoplay: true,
24 animationData: animationData,
25 rendererSettings: {
26 preserveAspectRatio: 'xMidYMid slice',
27 },
28 };
29
30 return (
31 <div className="controlled">
32 <h1>Controlled Lottie</h1>
33 <p>Uses state manipulation to start, stop and pause animations</p>
34 <Lottie
35 options={defaultOptions}
36 height={400}
37 width={400}
38 isStopped={this.state.isStopped}
39 isPaused={this.state.isPaused}
40 />
41 <button
42 style={buttonStyle}
43 onClick={() => this.setState({ isStopped: true })}
44 >
45 Stop
46 </button>
47 <button
48 style={buttonStyle}
49 onClick={() => this.setState({ isStopped: false, isPaused: false })}
50 >
51 Play
52 </button>
53 <button
54 style={buttonStyle}
55 onClick={() => this.setState({ isPaused: !this.state.isPaused })}
56 >
57 Pause
58 </button>
59 </div>
60 );
61 }
62}
63
64export default ControlledLottie;
让我们分析一下这段代码。这与UnControldLottie.jsx有几个关键区别。我们在底部添加了三个按钮以及它们的样式。这些按钮用于切换处于状态的数据值。
Lottie组件还有另外两个道具：
isStoped-指示动画是否处于活动状态的布尔值isPaused-指示动画是否暂停的布尔值
我们的两个动画现在都可以使用了，所以让我们将它们导入到App.js中并在我们的应用程序中显示它们。
编辑App.js中的代码，导入我们的组件并将其添加到Render函数中：
1[label App.js]
2import React, { Component } from 'react';
3import './App.css';
4import UncontrolledLottie from './components/UncontrolledLottie';
5import ControlledLottie from './components/ControlledLottie';
6
7class App extends Component {
8 render() {
9 return (
10 <div className="App">
11 <h1>REACT LOTTIES</h1>
12 <div className="lotties">
13 <UncontrolledLottie />
14 <ControlledLottie />
15 </div>
16 </div>
17 );
18 }
19}
20
21export default App;
让我们来设计我们的应用程序以使其成为移动responsive.我们可以使用css grid.]来完成此操作将以下代码添加到您的App.css文件。
1[label App.css]
2.lotties {
3 display: grid;
4 grid-template-columns: auto;
5}
6
7@media only screen and (min-width: 800px) {
8 .lotties {
9 display: grid;
10 grid-template-columns: auto auto;
11 }
12}
这将我们的Lotty放在两列中，在宽度较小的设备上将减少到一列。
现在，启动应用程序：
1npm start
您的浏览器将打开，您将能够观察到这两个活动的动画。
不受控制的乐透将自动播放：
！【失控洛蒂展示自拍画面截图】(https://assets.digitalocean.com/articles/how-to-add-animations-to-react-apps-with-react-lottie/pxktmpux0j8cm7yri4ls.png)
受控的Lottie将有三个按钮：
图像的ControlledLottie的屏幕快照
点击暂停 会将受控动画冻结在当前帧。单击** 停止** 将动画返回到其默认位置并保持不变。
结论
Lottie可以作为一个轻量级的方法来添加动画到您的Web应用程序。它可以用来使应用程序更具交互性，并提供视觉上吸引人的反馈，如动画指示某些进程的状态。Lotties是高性能的，不会给你的应用程序带来沉重的负担。