使用React-Lottie将动画添加到React Apps

So your designer just came up with an amazing new animation on Adobe After Effects for your web application, fantastic! Just one problem, how do you convert this to a format usable within your web app? No worries, the awesome folks at Airbnb Design have your back. Introducing, Lottie , a fantastic new technology that allows you to use these animations in real time in a lightweight and flexible format just as easily as static images.

因此，您的设计师刚刚为Web应用程序在Adobe After Effects上提出了一个惊人的新动画，太棒了！ 只是一个问题，如何将其转换为可在Web应用程序中使用的格式？ 不用担心，Airbnb Design的优秀人员将支持您。 Lottie是一项出色的新技术，它使您能够像静态图像一样轻松地以轻巧灵活的格式实时使用这些动画。

How does this work you ask? Well, here's the explanation from Airbnb Design:

您如何要求这项工作？ 好吧，这是Airbnb Design的解释：

Lottie uses animation data exported as JSON files from an open-source After Effects extension called Bodymovin. The extension is bundled with a JavaScript player that can render the animations on the web. Lottie is amazing for 3 main reasons:

Lottie使用从称为Bodymovin的开源After Effects扩展导出为JSON文件的动画数据。 该扩展程序捆绑了一个JavaScript播放器，该播放器可以在网络上渲染动画。 Lottie之所以令人赞叹，主要有以下三个原因：

• It makes use of Adobe Effects flexible features to come up with high quality animations
  它利用Adobe Effects的灵活功能来制作高质量的动画
• It allows you to manipulate your animation in whatever way you would like
  它允许您以任何方式操纵动画
• The animations have a small file size as they are they are in vector format
  由于动画为矢量格式，因此文件较小

In this article, we'll be looking at how we can leverage the power of Lottie to add more life to our React Applications. To do this, we'll be using an npm package called react-lottie to generate viewable animations from JSON files exported by Bodymovin. Since we'll be focusing on the app side of things, we won't look into how these animations are created in After Effects but rather use animations created and open sourced by designers on Lottiefiles. If you have animations on After effects that you would like to use, you can export them to JSON using the Bodymovin plugin for After Effects.

在本文中，我们将研究如何利用Lottie的功能为React应用程序增加寿命。 为此，我们将使用一个名为react-lottie的npm包从Bodymovin导出的JSON文件中生成可见的动画。 由于我们将重点放在应用程序方面，因此我们不会研究在After Effects中如何创建这些动画，而是使用设计师在Lottiefiles上创建和开源的动画。 如果您要使用After Effects上的动画，则可以使用After Effects的Bodymovin插件将其导出为JSON。

我们将要建设的 ( What we'll be building )

For this tutorial, we'll build this application which consists of two types of Lotties, one regular one and another with controlled animations depending on certain values in state.

对于本教程，我们将构建此应用程序，该应用程序由两种类型的Lotties组成，一种是常规的，另一种是根据状态中的某些值具有受控动画的。

https://codesandbox.io/embed/github/austinroy/lottie-demo/tree/master/

https://codesandbox.io/embed/github/austinroy/lottie-demo/tree/master/

Let's get started.

让我们开始吧。

创建我们的应用程序 ( Creating our application )

We'll be using create-react-app to create our app. If you don't have it installed yet run the following command to do so:

我们将使用create-react-app来创建我们的应用程序。 如果尚未安装，请运行以下命令：

npm install --g create-react-app

Now let's create our application:

现在创建应用程序：

create-react-app lottie-demo

This will create some boilerplate code for our app and configure our react development environment. Open up the lottie-demo directory and let's get coding. Yarn is create-react-app's default package manager and it's what we'll use to handle our dependencies(or rather dependency since there's only one for this project) so it's worth looking into as well.

这将为我们的应用程序创建一些样板代码，并配置我们的React开发环境。 打开lottie-demo目录，让我们开始编码。 Yarn是create-react-app的默认程序包管理器，它是我们用来处理依赖关系（或依赖关系，因为该项目只有一个依赖关系）的程序，因此也值得研究。

Now let's install our one and only dependency, react-lottie , to do this run this command in the terminal:

现在，我们安装我们唯一的依赖关系react-lottie ，以在终端中运行以下命令：