Lottie 是一个开源的库，允许你将 Adobe After Effects® 的动画转换为可在任何移动或网页应用中使用的 JSON 文件。以下是一些关于 Lottie 的基本指南：

安装 Lottie

首先，你需要安装 Lottie。你可以通过以下命令在你的项目中添加 Lottie：

npm install lottie-web

或者如果你使用的是 yarn：

yarn add lottie-web

使用 Lottie

在你的项目中引入 Lottie 后，你可以按照以下步骤使用它：

  1. 引入 Lottie 库
  2. 创建一个动画 JSON 文件
  3. 在 HTML 中添加一个容器元素
  4. 初始化 Lottie
import lottie from 'lottie-web';

// 创建一个动画实例
const animation = lottie.loadAnimation({
  container: document.getElementById('lottie-container'),
  renderer: 'svg',
  loop: true,
  autoplay: true,
  path: 'path/to/your/animation.json'
});

// 动画加载完成后的回调函数
animation.addEventListener('complete', () => {
  console.log('Animation completed');
});

示例动画

以下是一个简单的动画示例，你可以将其添加到你的项目中查看效果。

<div id="lottie-container"></div>

扩展阅读

想要了解更多关于 Lottie 的信息，可以阅读以下文档：

希望这些信息能帮助你更好地了解和使用 Lottie。🎉

Lottie_Sample