介绍

Adobe After Effects 是一种生成网络动画的直观方式，但在将这些动画转换为网络应用程序时一直存在问题。通常需要使用第三方程序从 After Effects 导入动画。

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

在本文中，我们将探索如何使用 Lottie 为我们的 React 应用程序添加动画。为了实现这一点，我们将使用一个 npm 包react-lottie来从 Bodymovin 导出的 JSON 文件中生成可视动画。

注意：由于我们将专注于应用程序方面，因此我们不会介绍如何在 After Effects 中创建这些动画，而是使用设计师在LottieFiles上创建和开源的动画。如果您想使用 After Effects 上的动画，可以使用 After Effects 的 Bodymovin 插件将它们导出为 JSON。

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

如果您想查看最终代码，请查看此CodeSandbox 示例。

先决条件

要完成本教程，您需要：

• Node.js 安装在本地，您可以按照如何安装 Node.js 和创建本地开发环境来完成。

从 LottieFiles 下载 Lottie JSON 文件需要创建一个免费帐户。

本教程已通过 Node v14.4.0、npmv6.14.4、reactv16.13.1 和react-lottiev1.2.3 验证。

步骤 1 — 设置项目

我们将create-react-app用于创建我们的应用程序：

npx create-react-app lottie-demo

这将为我们的应用程序创建一些样板代码并配置我们的 React 开发环境。打开lottie-demo目录，让我们开始编码：

cd lottie-demo

现在，让我们安装依赖项react-lottie. 为此，请在终端中运行此命令：

npm install react-lottie

现在，让我们添加动画。

第 2 步 – 下载样本彩票

我们将从LottieFiles获取我们的示例动画。导航到该站点并创建一个免费帐户。

LottieFiles 让您可以访问来自全球设计师的精选动画库。它还提供了一个平台来测试、上传和分享您自己的动画。

浏览动画，必要时调整设置，当您对所拥有的内容感到满意时，单击下载 JSON以获取动画。

在src我们的应用程序目录中，创建一个lotties子目录。将下载的 JSON 文件放在lotties目录中。

现在，我们已准备好创建显示这些动画的组件。

第 3 步 – 创建不受控制的彩票

动画可以被允许自由运行或被状态数据操纵。首先，让我们看第一种情况并创建一个导入和渲染 Lottie 的动画。

在src我们的应用程序目录中，创建一个components子目录。

UncontrolledLottie.jsx在components目录内创建一个名为的文件，并将以下代码放入其中：

import React, { Component } from 'react';
import Lottie from 'react-lottie';
import animationData from '../lotties/4203-take-a-selfie.json';

class UncontrolledLottie extends Component {
  render() {
    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div>
        <h1>Lottie</h1>
        <p>Base animation free from external manipulation</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
        />
      </div>
    );
  }
}

export default UncontrolledLottie;

在本例中，4204-take-a-selfie.json是下载的 Lottie 的 JSON 文件。用您下载的任何图像替换该文件。

现在，让我们探索配置中提供的信息。你会注意到我们options向Lottie组件传递了一个prop ；这包含要渲染的动画的配置数据。这包括：

• animationData – 一个带有导出动画数据的对象，在我们的例子中是 JSON 文件
• autoplay – 一个布尔值，确定它是否会在准备好后立即开始播放
• loop – 一个布尔值或数字，用于确定动画是否会重复或应该重复多少次
• rendererSettings – 渲染器的配置数据

这些只是您可以提供的一些选项。

我们还提供动画的尺寸（width和height）作为Lottie.

现在，让我们添加我们控制的 Lottie。

第 4 步 – 创建受控彩票

可以在 React 中操纵 Lotties 以使用状态中的数据更改其某些属性。在我们的例子中，我们将创建按钮来控制 Lottie 中的动画。

让我们在其中创建一个文件components并将其命名为ControlledLottie.jsx. 将以下代码放入该文件中：

import React, { Component } from 'react';
import Lottie from 'react-lottie';
import animationData from '../lotties/77-im-thirsty.json';

class ControlledLottie extends Component {
  state = { isStopped: false, isPaused: false };

  render() {
    const buttonStyle = {
      display: 'inline-block',
      margin: '10px auto',
      marginRight: '10px',
      border: 'none',
      color: 'white',
      backgroundColor: '#647DFF',
      borderRadius: '2px',
      fontSize: '15px',
    };

    const defaultOptions = {
      loop: true,
      autoplay: true,
      animationData: animationData,
      rendererSettings: {
        preserveAspectRatio: 'xMidYMid slice',
      },
    };

    return (
      <div className="controlled">
        <h1>Controlled Lottie</h1>
        <p>Uses state manipulation to start, stop and pause animations</p>
        <Lottie
          options={defaultOptions}
          height={400}
          width={400}
          isStopped={this.state.isStopped}
          isPaused={this.state.isPaused}
        />
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: true })}
        >
          Stop
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isStopped: false, isPaused: false })}
        >
          Play
        </button>
        <button
          style={buttonStyle}
          onClick={() => this.setState({ isPaused: !this.state.isPaused })}
        >
          Pause
        </button>
      </div>
    );
  }
}

export default ControlledLottie;

我们来分析一下这段代码。这与UncontrolledLottie.jsx. 我们在底部添加了三个按钮及其样式。这些按钮用于切换状态中数据的值。

Lottie 组件还有另外两个道具：

• isStopped – 指示动画是否处于活动状态的布尔值
• isPaused – 指示动画是否暂停的布尔值

我们的两个动画现在都可以使用了，所以让我们将它们导入App.js并显示在我们的应用程序中。

编辑 中的代码App.js，导入我们的组件并将它们添加到渲染函数中：

import React, { Component } from 'react';
import './App.css';
import UncontrolledLottie from './components/UncontrolledLottie';
import ControlledLottie from './components/ControlledLottie';

class App extends Component {
  render() {
    return (
      <div className="App">
        <h1>REACT LOTTIES</h1>
        <div className="lotties">
          <UncontrolledLottie />
          <ControlledLottie />
        </div>
      </div>
    );
  }
}

export default App;

让我们设计我们的应用程序，使其具有移动响应性。我们可以使用CSS grid来做到这一点。将以下代码添加到您的App.css文件中。

.lotties {
  display: grid;
  grid-template-columns: auto;
}

@media only screen and (min-width: 800px) {
  .lotties {
    display: grid;
    grid-template-columns: auto auto;
  }
}

这将我们的 Lotties 放在两列中，在宽度较小的设备上将减少为单列。

现在，启动应用程序：

npm start

您的浏览器将打开，您将能够观察到两个活动的动画。

不受控制的洛蒂将自动播放：

Controlled Lottie 将有三个按钮：

单击暂停将使受控动画冻结在其当前帧中。单击“停止”将动画返回到其默认位置并将其保持在那里。

结论

Lottie可以用作向 Web 应用程序添加动画的轻量级方法。它可用于使应用程序更具交互性并提供视觉上吸引人的反馈，例如指示某些进程状态的动画。Lotties 是高性能的，不会给您的应用程序带来沉重的负担。