如何使用React-Lottie将动画添加到React应用

介绍 (Introduction)

Adobe After Effects can be an intuitive way to generate web animations, but there has historically been problems converting these animations to web apps. It is usually necessary to use a third party program to import an animation from After Effects.

Adobe After Effects可以是一种生成Web动画的直观方法，但是历史上一直存在将这些动画转换为Web应用程序的问题。 通常需要使用第三方程序从After Effects中导入动画。

One such program is Lottie, a program developed by Airbnb Design that allows you to use these animations in real time in a lightweight and flexible format. Lottie takes JSON data from an After Effects extension called Bodymovin and turns it into a usable animation for the web.

其中一个程序就是Lottie ，这是由Airbnb Design开发的程序，它允许您以轻巧灵活的格式实时使用这些动画。 Lottie从名为Bodymovin的After Effects扩展中获取JSON数据，并将其转换为网络上可用的动画。

In this article, we’ll be looking at how to use Lottie to add animations 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。

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

在本教程中，我们将构建一个由两种类型的Lotties组成的React应用程序，一种是常规的，另一种是根据状态中的特定值具有受控动画的。

If you’d like to look at the finalized code, take a look at this CodeSandbox example.

如果您想看一下最终代码，请看下面的CodeSandbox示例 。

第1步-创建我们的应用程序 (Step 1 — 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来创建我们的应用程序。 如果尚未安装，请运行以下命令进行安装：