如何使用React-Lottie向React应用程序添加动画

来自菜鸟教程
跳转至：导航、​搜索

介绍

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

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

在本文中，我们将探索如何使用 Lottie 将动画添加到我们的 React 应用程序中。 为此，我们将使用名为 react-lottie 的 npm 包从 Bodymovin 导出的 JSON 文件生成可视动画。

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


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

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

先决条件

要完成本教程，您需要：

  • Node.js 安装在本地，您可以按照【X57X】如何安装Node.js 并创建本地开发环境【X126X】进行。

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

本教程已使用 Node v14.4.0、npm v6.14.4、react v16.13.1 和 react-lottie v1.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 步 — 下载样品 Lotties

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

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

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

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

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

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

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

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

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

src/components/不受控制的Lottie.jsx 

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 组件； 这包含要渲染的动画的配置数据。 这包括：

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

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

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

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

第 4 步 - 创建受控彩票

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

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

src/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 组件还有另外两个 props：

  • isStopped - 一个布尔值，指示动画是否处于活动状态
  • isPaused - 一个布尔值，指示动画是否暂停

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

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

应用程序.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 网格 来做到这一点。 将以下代码添加到您的 App.css 文件中。

应用程序.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 将具有三个按钮：

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

结论

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

取自“https://cainiaojiaocheng.com/index.php?title=如何使用React-Lottie向React应用程序添加动画&oldid=29150”
Powered by MediaWiki