lottie-web 安装——npm、CDN、三种方式任选

引入方式

lottie-web 有三种常见的引入方式，按你的项目类型选。

方式一：npm 安装（推荐用于现代前端项目）

npm install lottie-web
# 或
yarn add lottie-web

然后在代码里：

import lottie from 'lottie-web';

适合 React、Vue、Angular 等现代框架项目，可以打包进 bundle、享受 tree-shaking。

方式二：CDN 直接引入（纯静态页面）

<!-- lottie-web CDN：从 cdnjs.com 搜索 lottie-web 获取最新版本 -->
<script src="CDN 托管地址（见 cdnjs.com/libraries/lottie-web）"></script>

适合不需要构建工具的纯静态页面——直接在 <script> 里用全局的 lottie 对象。

方式三：从 Bodymovin 插件下载

打开 After Effects → Bodymovin 面板 → 点击 "Get Player" 按钮，插件会直接下载对应版本的 bodymovin.js。适合需要保证 Bodymovin 插件版本和渲染引擎版本完全匹配的场景。

方式四：Bower（不推荐）

bower install lottie-web

Bower 已经停止维护，新项目不要用。

版本选择

• 最新稳定版：npm 和 CDN 上都以 5.x 系列为主。
• 和 Bodymovin 匹配：如果你用 AE + Bodymovin 导出，建议 lottie-web 版本和 Bodymovin 插件使用同一大版本（都是 5.x）。
• lottie-web vs bodymovin：两个名字是同一个库——早期叫 Bodymovin（因为插件名），后来统一改名为 lottie-web。代码仓库是同一个 airbnb/lottie-web。

引入后第一个动画

const animation = lottie.loadAnimation({
  container: document.getElementById('my-lottie'), // DOM 元素
  renderer: 'svg',     // 'svg' | 'canvas' | 'html'
  loop: true,          // 循环次数（true=无限）
  autoplay: true,      // 是否自动播放
  path: 'data.json',   // 动效 JSON 文件路径
});

SVG vs Canvas vs HTML 渲染方式

绝大多数场景选 svg 就对了——渲染清晰、性能够用、可以用 CSS 控制动画容器样式。