使用强大的 AirBnb Lottie 让你的 React APP 炫酷起来

Lottie 是 Airbnb 开发的一款能够为原生应用添加动画效果的开源工具。能够实时渲染 After Effects 动画特效。Lottie 目前提供了 iOS, Android, 和 React 版本。（ https://airbnb.design/lottie/ ）

动画可以让我们的React应用更吸引用户。

然而，要制作好看的动画，可能需要大量的工作和大量的代码。

我将向你展示如何使用一个非常强大的React库来制作令人惊叹的、像素完美的动画来增强你的应用程序，而不需要做很多工作。

Lottie for React

Lottie提供了一种完全不同的方式来创建令人印象深刻的动画，它使用流行的Adobe After Effects程序生成的动画，这些动画以JSON文件的形式导入和导出。最重要的是，要找到和使用这些动画，你不需要Adobe After Effects程序。

如何使用

您所需要做的就是使用一个完全免费的资源，称为lottifiles。这是一个拥有大量免费和付费Lottie动画的网站。

假设我们想要在我们的应用程序中使用一个动画React logo(注意，你可以使用任何可用的动画)。

我将从lottifiles中选择以下React图标旋转的React动画。从那里，我们可以预览它，并改变一些东西，如背景颜色。

当我们准备好使用它时，我们可以通过选择Lottie JSON下载动画的JSON文件:

不管你是如何创建React项目的，你都可以把它放在任何你喜欢的文件夹里。你可以把它放在项目根目录下的静态文件夹中，也可以把它放在src文件夹下的动画文件夹中。

这取决于你，因为我们将从任何文件路径导入JSON数据。

我选择把我的JSON文件(称为react-logo.json)放在我的静态文件夹:

安装 Lottie-Web

完成之后，我们将通过引入Lottie -web包来安装Lottie。

npm i lottie-web

请注意，有一个替代的Lottie包可用，称为react-lottie，但是它在底层使用Lottie-web，可以方便地直接使用，稍后你将看到这一点。

一旦安装了lottie-web，我们就可以将动画放置在任何JSX元素中，方法是给出一个指示，表明我们希望它驻留在某个选择器中。

最好的方法是使用id属性，因为它应该只在应用程序的元素中使用一次。

在我们的例子中，我们可以给它指定react-logo的id值:

// src/App.js
import React from "react";

export default function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

要使用Lottie，我们可以从Lottie-web导入它，我们将从我们放置它的任何地方导入JSON:

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

在 useEffect Hook 中使用 Lottie

使用Lottie本身很简单。我们需要获得对JSX/DOM元素的引用，我们希望将动画放入该元素，并向其提供JSON数据。

要与DOM本身交互，我们需要确保组件已经挂载，因此我们将使用useEffect来执行一个副作用，并传入一个空的dependencies数组。

在useEffect中，我们现在可以调用lottie了。loadAnimation来运行我们的动画，通过给它传递一个对象。在这个对象上，我们需要提供的第一件事是容器，也就是我们想要在其中运行动画的DOM节点。

我们可以使用任何方法引用DOM节点，我个人使用: document.getElementById('react-logo')

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
    });
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

有了这个容器，我们只需要在一个名为animationData的属性上提供JSON数据本身。

// src/App.js
import React from "react";
import lottie from "lottie-web";
import reactLogo from "../static/react-logo.json";

export default function App() {
  React.useEffect(() => {
    lottie.loadAnimation({
      container: document.querySelector("#react-logo"),
    });
  }, []);

  return (
    <div>
      <h1>Hello World</h1>
      <div id="react-logo" />
    </div>
  );
}

之后你应该会看到动画自动运行:

如果你有和我一样的代码，并让你的动画在一个空div中运行，它会看起来很大。

你可以通过提供一些样式并为容器div添加一个固定的宽度和高度来解决这个问题:

<div id="react-logo" style={{ width: 200, height: 200 }} />

Lottie.loadAnimation 的属性

除了container和animationData，还有一些其他重要的属性可以传递给loadAnimation来改变动画的外观和功能。

lottie.loadAnimation({
  container: document.querySelector("#react-logo"),
  animationData: reactLogo,
  renderer: "svg", // "canvas", "html"
  loop: true, // boolean
  autoplay: true, // boolean
});

上面，我已经包含了loadAnimation的所有默认设置。动画的默认呈现方式是SVG，带有renderer属性。这有最多的特性，但HTML选项可以有更好的性能，并支持3D层。

默认情况下动画会无限循环或重复，因为loop被设置为true。您可以通过将其设置为false来关闭此行为。

动画的自动播放设置默认为true，这意味着动画会在加载时自动播放。如果你想有条件地运行动画，你可以通过使用一个状态变量将它设置为true或false(如果你想只在动画可见时播放动画)。

添加 Lottie Light 版本

最后，我要提到的关于Lottie的最后一点是Lottie-web是一个相当大的依赖性。

如果您想使用Lottie的所有特性，但又担心在最终的bundle中引入过多的代码，可以按照如下方式导入Lottie的轻版本:

import lottie from "lottie-web/build/player/lottie_light";

希望这篇文章能够帮助您启动并运行Lottie，当您在web应用程序中寻找一些特别的东西时，可以将Lottie作为一个特性添加到您的React项目中。