Lottie

将 Adobe After Effects 动画导出为轻量级 JSON 文件，在各平台原生渲染的高质量矢量动画方案。

技术简介说明

Lottie 是由 Airbnb 于 2015 年开源的动画渲染方案，核心思路是：设计师在 Adobe After Effects 中完成动画制作，通过 Bodymovin 插件将动画导出为 JSON 格式的描述文件，再由各平台（Web、iOS、Android、React Native 等）的 Lottie 运行时库解析该 JSON 并原生渲染动画。这种方式彻底解决了传统动画方案中"设计师产出困难"和"开发还原度低"两大痛点，实现了设计稿到代码的零损耗传递。

Lottie 的诞生源于 Airbnb 移动端团队的实际需求——他们需要将设计师精心制作的动画在 iOS 和 Android 端原生呈现，而传统的帧动画（序列图）文件体积巨大、位图缩放模糊，手写代码动画又难以精确还原设计效果。Lottie 以矢量 JSON 描述 + 原生渲染的方式，在极小的文件体积下实现了像素级精确的动画回放，迅速成为移动端和 Web 端微动画的事实标准。

2024–2026 年间，Lottie 生态迎来了几个里程碑式变化：Lottie 规范 v1.0 于 2024 年 9 月正式发布，成为 Linux 基金会下的开放标准；2025 年 2 月获得 IANA 官方认可，获分配 MIME 类型 video/lottie+json；dotLottie（.lottie）格式逐步成为生产推荐格式，支持多动画打包、状态机交互、动态主题等高级特性。LottieFiles 平台已发展为拥有 80 万+动画资源、服务 28 万+团队的全链路动效平台，并获得 Webflow Ventures 和 Figma Ventures 的战略投资。

基本信息

最新版本（截至 2026 年 7 月）

快速上手

安装

方案一：lottie-web（经典方案，直接控制）

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

方案二：@lottiefiles/dotlottie-react（推荐 React 方案）

npm install @lottiefiles/dotlottie-react

支持 .lottie（dotLottie）和 .json（经典 Lottie）两种格式，是目前最活跃维护的 React 方案。

方案三：lottie-react（轻量社区方案）

npm install lottie-react

方案四：@lottiefiles/dotlottie-web（Web Components / 其他框架）

npm install @lottiefiles/dotlottie-web

提供 Web Component（<dotlottie-wc>），可用于 Vue、Svelte、SolidJS 等任意框架。

方案五：@lottiefiles/lottie-player（Web Component 播放器）

npm install @lottiefiles/lottie-player

基于 Web Components 的通用播放器，注意该包曾于 2024 年 11 月经历安全事件（已解决），新项目建议优先使用 dotlottie-web。

基础配置

lottie-web 基础用法

import lottie from 'lottie-web'
 
// 在 React 中使用（useEffect 方式）
import { useEffect, useRef } from 'react'
 
function LottieAnimation() {
  const containerRef = useRef<HTMLDivElement>(null)
 
  useEffect(() => {
    if (!containerRef.current) return
 
    const animation = lottie.loadAnimation({
      container: containerRef.current,
      renderer: 'svg',     // 渲染模式：'svg' | 'canvas' | 'html'
      loop: true,          // 是否循环播放
      autoplay: true,      // 是否自动播放
      path: '/animations/animation.json', // JSON 文件路径
    })
 
    return () => animation.destroy() // 组件卸载时清理
  }, [])
 
  return <div ref={containerRef} style={{ width: 300, height: 300 }} />
}

@lottiefiles/dotlottie-react 推荐用法

import { DotLottieReact } from '@lottiefiles/dotlottie-react'
 
function App() {
  return (
    <DotLottieReact
      src="/animations/animation.lottie"
      loop
      autoplay
      style={{ width: 300, height: 300 }}
    />
  )
}

最小示例

<!-- CDN 方式引入（最快上手） -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.13.0/lottie.min.js"></script>
 
<div id="lottie-container" style="width: 200px; height: 200px;"></div>
 
<script>
  lottie.loadAnimation({
    container: document.getElementById('lottie-container'),
    renderer: 'svg',
    loop: true,
    autoplay: true,
    path: 'https://lottie.host/your-animation-url.json'
  })
</script>

核心概念与架构

Bodymovin 插件

Bodymovin 是 Adobe After Effects 的导出插件，负责将 AE 合成中的动画数据（关键帧、形状、变换、遮罩等）转换为 JSON 格式。它是 Lottie 工作流的起点。目前 LottieFiles 官方提供的 AE 插件已逐步取代原版 Bodymovin，提供更流畅的导出体验、实时预览和 dotLottie 格式支持。此外，Figma 也可通过 LottieFiles 插件直接导出 Lottie 动画。

Lottie JSON 格式

Lottie JSON 文件描述了动画的完整信息：

• 图层（Layers）：形状图层、文本图层、图片图层、预合成图层等
• 关键帧（Keyframes）：位置、缩放、旋转、透明度等属性的时间曲线
• 形状（Shapes）：路径、矩形、椭圆、多边形等矢量图形
• 资源（Assets）：内嵌或引用的图片资源

JSON 格式是纯文本的，可读性好但文件体积相对较大。dotLottie（.lottie）格式通过打包 + 压缩解决了这个问题。

渲染模式（Web 端）

dotLottie 格式

.lottie 文件是一个压缩包（类似 ZIP），可以包含：

• 多个 Lottie JSON 动画
• 主题（Theme）定义（如亮色/暗色模式切换）
• 状态机（State Machine）交互逻辑
• 关联的图片/字体等资源

dotLottie 的优势在于：单文件包含完整动画体验、支持交互、体积更小、跨平台一致渲染。

整体架构

┌─────────────────────┐
│  After Effects /    │
│  Figma / Lottie     │  ← 设计 & 创作层
│  Creator            │
└────────┬────────────┘
         │ Bodymovin / LottieFiles 插件导出
         ▼
┌─────────────────────┐
│  .json / .lottie    │  ← 动画数据层
│  文件               │
└────────┬────────────┘
         │ 加载
         ▼
┌─────────────────────────────────────────┐
│  渲染引擎                                │  ← 渲染层
│  ├─ lottie-web (SVG/Canvas/HTML)        │
│  ├─ dotlottie-web (Canvas, WASM 加速)   │
│  ├─ lottie-ios (Core Animation)         │
│  ├─ lottie-android (Android Canvas)     │
│  └─ dotlottie-rs (跨平台 Rust 引擎)     │
└─────────────────────────────────────────┘

核心特性

1. 轻量级文件体积

Lottie JSON 文件通常只有几 KB 到几十 KB，相比 GIF（几百 KB 到几 MB）和 MP4 视频，体积极为精简。dotLottie 格式进一步通过压缩和资源打包减小体积。

2. 矢量无损渲染

基于矢量图形描述，在任何分辨率和设备上都能像素级精确渲染，不会出现位图模糊问题，完美适配 Retina/高分屏。

3. 原生性能

各平台使用原生渲染引擎（iOS 使用 Core Animation、Android 使用 Canvas API、Web 使用 SVG/Canvas），动画流畅度可达 60fps，且 GPU 加速。

4. 全平台覆盖

一套动画文件可在 Web、iOS、Android、React Native、Flutter、Windows、macOS、tvOS、visionOS 等平台运行，真正实现"设计一次，处处播放"。

5. 交互能力（State Machines）

dotLottie 格式支持状态机（State Machines），允许在不编写额外代码的情况下定义动画的交互逻辑——悬停、点击、滚动、输入响应等，状态机逻辑随 .lottie 文件跨平台生效。

6. 动态主题切换

支持在运行时动态切换动画主题（如亮色/暗色模式），无需导出多份动画文件，通过 API 或状态机即可实现。

7. 开放标准

Lottie 规范 v1.0 已由 Linux 基金会发布为开放标准（2024 年 9 月），并获得 IANA 官方 MIME 类型 video/lottie+json（2025 年 2 月），保证了格式的长期稳定性和互操作性。

8. 丰富的设计工具生态

支持从 After Effects（Bodymovin / LottieFiles 插件）、Figma（LottieFiles 插件）、Lottie Creator（内置 AI 工具）、SVGator 等多种工具导出 Lottie 动画。

9. AI 驱动的创作能力

2025–2026 年 LottieFiles 推出 AI 功能矩阵：Prompt to Vector（文本生成矢量动画）、Prompt to State Machines（文本生成交互逻辑）、Motion Copilot（AI 辅助创作），大幅降低动画创作门槛。

10. 庞大的动画资源库

LottieFiles 平台提供 80 万+免费和付费动画资源，开发者可直接使用或二次修改，极大加速开发效率。

生态图

设计工具层

渲染引擎层

框架封装层

平台与工具

适用场景

✅ 最适合

1. UI 微交互动画：加载指示器、按钮反馈、下拉刷新、开关切换、Tab 切换等
2. 空状态和引导页：空列表、错误页面、Onboarding 引导流程中的动画插图
3. 图标动画：汉堡菜单展开/收起、搜索图标变形、点赞/收藏动效
4. 品牌动画：品牌 Logo 动效、开屏动画、Splash Screen
5. 数据可视化辅助：简单的数据动画、进度条动画、成功/失败反馈
6. 滚动驱动动画：配合 GSAP ScrollTrigger 等工具实现滚动控制的动画播放
7. 跨平台统一动效：需要一套动画在 Web + iOS + Android 保持一致体验的场景

❌ 不适合

• 复杂游戏角色动画（建议 Spine 或 Rive）
• 需要实时物理模拟的动画
• 视频级别的长时连续动画（建议 MP4/WebM）
• 3D 场景动画（lottie-android 6.7.0 开始初步支持 3D，但能力有限）

开发与工程化

动画资源管理

public/
└── animations/
    ├── loading.json        # 经典 Lottie JSON
    ├── success.lottie      # dotLottie 格式（推荐）
    └── onboarding/
        ├── step1.lottie
        ├── step2.lottie
        └── step3.lottie

CDN 加载

动画文件可通过 CDN 加载，避免打包进应用：

<DotLottieReact
  src="https://lottie.host/xxxxx/animation.lottie"
  loop
  autoplay
/>

按需加载

// 动态 import 动画 JSON
import animationData from '@/assets/animations/loading.json'
 
lottie.loadAnimation({
  container: ref.current,
  animationData,  // 直接传入对象，不走 path
  renderer: 'svg',
  loop: true,
  autoplay: true,
})

类型支持

// lottie-web 自带 TypeScript 类型
import type { AnimationItem } from 'lottie-web'
 
let animation: AnimationItem | null = null

与构建工具集成

• Webpack / Vite：lottie-web 直接安装使用，JSON 动画可通过 import 引入
• Next.js：注意 SSR 兼容，lottie-web 5.13.0 已修复 SSR 环境检测问题；组件需标记为 client component
• React Server Components：Lottie 动画组件必须是 Client Component（'use client'）

动画优化流程

1. 设计师在 AE 中尽量使用形状图层，避免位图和复杂特效
2. 使用 LottieFiles Optimizer 压缩 JSON 文件
3. 优先使用 .lottie 格式（自带压缩）
4. 复杂动画使用 Canvas 渲染模式
5. 非可视区域暂停动画（animation.pause() 或 requestAnimationFrame 控制）

性能与安全

性能优化

安全注意事项

技术对比

Lottie vs CSS 动画 vs GSAP vs Rive vs Spine

选型建议

• Lottie：设计师驱动的 UI 微动画，需要跨平台一致，追求设计还原度
• CSS 动画：简单的悬停、过渡、位移效果，无需额外依赖
• GSAP：复杂的滚动驱动动画、时间轴编排、序列动画（Web 端）
• Rive：需要强交互、状态驱动的动态 UI（如游戏化界面、动态按钮状态）
• Spine：2D 游戏角色骨骼动画

常见组合

• Lottie + GSAP：用 GSAP ScrollTrigger 控制 Lottie 动画的播放进度，实现滚动驱动
• Lottie + Rive：简单展示动画用 Lottie，强交互部分用 Rive
• CSS + Lottie：CSS 处理布局和过渡，Lottie 处理品牌/图标级精细动画

最佳实践

设计阶段

1. AE 中尽量使用形状图层：Bodymovin 对形状图层支持最好，位图效果、表达式、部分混合模式不支持或有限制
2. 控制图层数量：图层越多 JSON 越大、渲染越慢，合理合并和简化
3. 避免过高的帧率：30fps 通常足够，60fps 仅在必要时使用
4. 使用 LottieFiles 预览：导出后立即在目标设备上预览，确认效果一致

开发阶段

5. React 项目优先使用 @lottiefiles/dotlottie-react：活跃维护、支持 dotLottie 格式、内置状态机支持
6. 组件卸载时销毁动画实例：避免内存泄漏（animation.destroy() 或 DotLottieReact 自动管理）
7. 使用 useMemo / useCallback 缓存配置：避免不必要的重渲染
8. 注意 SSR 兼容：lottie-web 引用了 document/navigator，SSR 环境需要动态导入或条件渲染

性能优化

9. 优先使用 .lottie 格式：文件更小、加载更快、支持更多特性
10. 视口外交互暂停：使用 IntersectionObserver 控制动画只在可见时播放
11. 批量动画考虑 Canvas 模式：页面上有多个 Lottie 时，Canvas 模式性能更好
12. 预加载关键动画：首屏动画建议内联 JSON 或预加载，避免加载延迟

工程化

13. 动画文件走 CDN：大型动画文件不打包进 JS bundle，通过 CDN 按需加载
14. 版本锁定：锁定 lottie-web 或 dotlottie 包的版本，避免自动升级引入问题
15. 安全审计：只从可信来源加载动画 JSON，避免加载外部不可信动画文件

技术局限与边界

AE 功能支持有限

Lottie 仅支持 After Effects 的部分功能子集。以下特性不支持或支持有限：

• 复杂表达式（Expressions）
• 部分混合模式（Blend Modes）
• 3D 图层（lottie-android 6.7.0 开始初步支持）
• 部分特效（如粒子、光线、模糊等）
• 文本动画器（Text Animator）的部分功能
• 轨道遮罩（Track Matte）部分模式

Web 端包体积

lottie-web 压缩后约 70KB，解压后约 240KB。对于只需要简单动画的场景，这个体积可能偏大。可考虑：

• 使用 lottie-web/build/player/lottie_light.min.js（轻量版）
• 或使用 @lottiefiles/dotlottie-web（WASM 方案，按需加载）

维护状态分裂

Airbnb 的 lottie-web 自 2025 年 5 月后未更新，社区活跃度下降。活跃开发已转移到 LottieFiles 的 dotlottie 生态。新建议项目优先选择 @lottiefiles/dotlottie-web 或 @lottiefiles/dotlottie-react。

交互能力仍在追赶

虽然 dotLottie 引入了状态机，但与 Rive 原生的状态机系统相比，Lottie 的交互能力仍处于追赶阶段。复杂交互场景下，Rive 可能是更好的选择。

调试困难

Lottie JSON 文件的可读性虽然比二进制格式好，但手动调试仍然困难。AE 导出的 JSON 结构复杂，遇到渲染异常时需要逐层排查。

无内置动画编辑器

Web 端开发者无法直接在浏览器中编辑 Lottie 动画，必须依赖 AE / Figma / Lottie Creator 等外部工具。

学习资源

官方文档

• Lottie 官方文档（Airbnb）
• LottieFiles 开发者文档
• dotlottie.io — dotLottie 格式规范
• dotLottie v1.0 规范
• Lottie 支持的 AE 特性列表

教程与指南

• LottieFiles Tutorials — 官方教程集合
• Getting Started with Lottie Animations in Android
• How to Use Lottie in React App
• dotlottie-react 集成指南
• State Machines 教程

社区

• LottieFiles Community Forum — 官方社区论坛
• lottie.community — Lottie 创作者社区
• r/lottie (Reddit) — Reddit 子版块

动画资源

• LottieFiles 免费动画库 — 80 万+免费动画
• IconScout（LottieFiles 旗下） — Lottie 动画市场
• LottieLab — 在线 Lottie 编辑器

视频资源

• Better Motion Ep.2 — Unpacking the magic behind dotLottie（2026.02）
• Lottie Creator 大型更新介绍
• State Machines 功能介绍

2026 年现状

版本与生态

截至 2026 年 7 月：

• lottie-web（Airbnb）最新版本为 5.13.0（2025 年 5 月），此后未发布新版本，Airbnb 侧维护趋于稳定/停滞。
• dotlottie-web / dotlottie-react（LottieFiles）是当前最活跃的开发线，dotlottie-web 已达 0.75.0，dotlottie-react 达 0.19.7，持续高频更新。
• dotlottie-rs 作为跨平台 Rust 渲染引擎，2026 年 4 月新增跨平台状态机支持。
• lottie-android 6.7.x 在 2025 年 10 月发布，是移动端最活跃的原生渲染器，亮点是 3D 动画支持。
• lottie-ios 4.5.x 已适配 Xcode 16 / Swift 6.0，支持 visionOS。

dotLottie 发展

dotLottie 已从"实验性格式"升级为生产推荐格式：

• .lottie 文件支持多动画、主题、状态机打包
• 状态机（State Machines）实现无代码交互，跨平台一致生效
• dotlottie-rs（Rust 引擎）提供高性能跨平台渲染
• LottieFiles 在 "The Lottie Power Stack 2026" 中将 dotLottie 定位为核心生产格式

LottieFiles 平台

• 已发展为全链路动效平台：动画资源库（80 万+）、创作工具（Lottie Creator）、团队协作、CDN 托管
• 获得 Webflow Ventures + Figma Ventures 战略投资
• 收购了 IconScout（图标/动画素材平台）
• 2025–2026 年密集推出 AI 功能（Prompt to Vector、Prompt to State Machines、Motion Copilot）
• 服务超过 28 万团队

npm 下载量

开放标准化

• Lottie 规范 v1.0 已发布（2024.09），由 Linux 基金会托管
• IANA 分配 MIME 类型 video/lottie+json（2025.02）
• Lottie Animation Community 在 OSSummit Europe 2025 进行规范宣讲
• 标准化进程确保了格式的长期生存力和互操作性

总结

2026 年的 Lottie 已从"Airbnb 的一个开源项目"演变为一个由 Linux 基金会托管开放标准 + LottieFiles 商业平台 + dotLottie 新一代格式三位一体的完整动效生态。虽然 Airbnb 侧的原始渲染器更新放缓，但 LottieFiles 通过 dotLottie 生态持续推动创新，状态机、AI 创作、跨平台 Rust 引擎等新能力让 Lottie 在 UI 动画领域的地位更加稳固。对于新项目，推荐优先使用 dotLottie 格式和 @lottiefiles/dotlottie-react / @lottiefiles/dotlottie-web 作为渲染方案。

参考来源

• LottieFiles 官网
• airbnb/lottie-web GitHub
• LottieFiles/dotlottie-web GitHub
• LottieFiles/dotlottie-rs GitHub
• airbnb/lottie-ios GitHub
• airbnb/lottie-android GitHub
• dotlottie.io
• Lottie 规范 v1.0 公告
• Linux 基金会公告
• IANA MIME 类型
• The Lottie Power Stack 2026
• The Next Chapter of Lottie
• dotLottie State Machines
• Lottie AirBnb 文档站
• lottie-web npm
• lottie-web Snyk 安全报告