在 React JS 中添加 Lottie 动画

Lottie 是一种开源动画文件格式，它小巧、高质量、具有交互性，并且可以在运行时进行操作。让我们学习如何在 React.js 中实现 Lottie 动画。Lottie 动画主要用于加载屏幕或作为启动屏幕。它在我们的 React 项目中以 JSON 格式编写和实现。

示例

前往官方 Lottie 动画网站并下载 Lottie JSON。

我将使用的动画链接 −

 https://lottiefiles.com/74546-character-02#/

将 JSON 文件命名为 "myloader.json"，并将其与 App.js. 位于同一级别。

现在安装 react-lottie 包 −

npm i --save react-lottie

Lottie 库将用于将 lottie 动画的 JSON 文件添加到你的 React 网站。

在 App.js 中添加以下代码行 −

import Lottie from "react-lottie";

// importing lottie animation JSON
// note that you can use any variable in place of "animation"
import animation from './myloader.json'
function App() {
   const defaultOptions = {
      loop: true,
      autoplay: true,
      // here is where we will declare lottie animation
      // "animation" is what we imported before animationData: animation,
      rendererSettings: {
         preserveAspectRatio: "xMidYMid slice",
      },
   };

   return (
      <div>
         <Lottie options={defaultOptions} height={300} width={300} />
      </div>
   );
}

export default App;

在 defaultOptions 中，我们简单地添加了一些动画属性并链接到我们的 Lottie 动画 JSON。然后我们用默认选项呈现一个 lottieView 并链接到动画。

输出

它将生成以下输出 −

Ath Tripathi

更新于： 28-Sep-2021

1K+ 浏览

开启你的 职业生涯

完成课程获得认证

开始