Lottie 动画介绍与 React 封装
Category（分类）: Visualization Status: 已读
原文：Lottie 动画介绍，原题《都 2022 年了，一个还不知道 Lottie 动画的前端已经 OUT 啦！》。 本文聚焦 Web 端
lottie-web的加载方式、控制 API 与 React 生命周期处理。
一、Web 端的最小实现
Lottie 是 Airbnb 开源的跨平台动画渲染方案。设计师将 After Effects 动画经 Bodymovin 导出为 JSON；Web 端用 lottie-web 加载 JSON 后渲染到一个容器内。
<div id="lottie"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lottie-web/5.9.4/lottie.min.js"></script>
<script>
const animation = lottie.loadAnimation({
container: document.querySelector('#lottie'),
renderer: 'svg',
loop: true,
autoplay: true,
path: '/animations/loading.json'
})
</script>
renderer 可取 svg、canvas、html。原文建议优先评估 SVG：通常可缩放、易于获得清晰效果；但最终选择仍取决于动画结构、设备性能和目标浏览器。
二、loadAnimation 的核心参数
| 参数 | 作用 |
|---|---|
container | 用于承载动画的 DOM 元素 |
renderer | 渲染器：svg / canvas / html |
loop | 是否循环播放 |
autoplay | 初始化后是否自动播放 |
path | JSON 地址；会实际发起网络请求 |
animationData | 直接传入 JSON 对象，与 path 二选一 |
path 和 animationData 的选择会影响打包策略：远程或静态 JSON 用 path 可避免把大数据塞进主 JS；直接导入 JSON 更容易随组件发布，但应评估包体积。两种方式不要同时设置。
三、播放控制 API
loadAnimation() 返回动画实例，可用它驱动业务交互：
const animation = lottie.loadAnimation(options)
animation.play()
animation.pause()
animation.stop()
animation.setSpeed(1.5)
// 页面或组件不再使用时必须释放
animation.destroy()
常见映射：加载状态用循环动画；表单成功时播放一次完成动画；标签页切走时暂停；组件卸载或路由离开时调用 destroy()。仅用 display: none 隐藏容器并不会替代实例销毁。
四、React 封装的要点
原文给出的 React Hooks 封装有三个关键点：
- 用
useRef保存容器和动画实例； - 在
useEffect中创建实例，依赖变化时重建； - 在 effect cleanup 中调用
destroy()，避免重复渲染与内存泄漏。
简化示例：
import { useEffect, useRef } from 'react'
import lottie from 'lottie-web'
type Props = {
path: string
loop?: boolean
autoplay?: boolean
}
export function Lottie({ path, loop = true, autoplay = true }: Props) {
const containerRef = useRef<HTMLDivElement>(null)
useEffect(() => {
if (!containerRef.current) return
const animation = lottie.loadAnimation({
container: containerRef.current,
renderer: 'svg',
loop,
autoplay,
path
})
return () => animation.destroy()
}, [path, loop, autoplay])
return <div ref={containerRef} style={{ width: '100%', height: '100%' }} />
}
若需要让父组件控制播放，可通过 forwardRef / useImperativeHandle 暴露 play、pause、stop 和实例获取方法；不过应先保持组件 API 小而明确，避免把底层实例到处传递。
五、上线前检查
- JSON、图片资源与字体是否可访问，是否配置了正确的 MIME 与 CORS；
- 动画容器是否有确定尺寸，避免首帧布局抖动；
- 路由切换、条件渲染、列表复用时是否调用
destroy()； - 是否尊重
prefers-reduced-motion，并提供静态替代内容； - 高复杂度遮罩、matte 和图片资源是否会造成掉帧或内存占用；
- 是否由设计与开发共同验收循环方式、播放帧段、触发时机和失败降级。
整理者注
Lottie 的价值是把“设计好的复杂动画”变成可配置、可控制的运行时资源；它不是免费的性能午餐。加载策略、生命周期清理和动效节制，决定了它在生产页面中是否真的好用。