在 React JS 中添加 Lottie 动画

react jsjavascript libraryfront end technology更新于 2025/11/17 7:08:17

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-animation 的 JSON 文件添加到您的 React 网站。

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

import Lottie from "react-lottie";

// 导入 lottie 动画 JSON
// 注意，您可以使用任何变量代替"animation"
从 './myloader.json' 导入动画
function App() {
   const defaultOptions = {
      loop: true,
      autoplay: true,
      // 我们将在此处声明 lottie 动画
      // "animation" 是我们之前导入的 animationData: animation,
      rendererSettings: {
         preserveAspectRatio: "xMidYMid slice",
      },
   };

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

export default App;

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