最稳妥方式是用 lottie-web 加载 JSON 动画：引入官方库、指定容器、调用 loadAnimation()；需确保 JSON 路径正确、容器存在且有尺寸、AE 导出选 JSON 格式并轮廓化文字。
直接用 lottie-web 加载 JSON 动画文件是最稳妥的方式，Lottie 官方已放弃对旧版 bodymovin 渲染器的维护，所有新项目请绕开 jQuery 插件或过时的 CDN 链接。
如何用 lottie-web 在 HTML 中加载动画
核心是引入官方库 + 指定容器 + 调用 lottie.loadAnimation()。不依赖构建工具也能跑，适合静态页快速集成。
- 确保动画导出为
JSON格式（AE 用 Lottie 插件导出时选 “JSON” 而非 “HTML”） - 在页面中放一个空容器，比如
- 通过
或传统引入lottie-web；推荐用 ESM 方式避免全局污染：
import lottie from 'https://unpkg.com/lottie-web@2.12.4/build/player/lottie_light.min.js';
lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
loop: true,
autoplay: true,
path: './animation.json'
});
注意：renderer: 'svg' 兼容性好、缩放清晰；若需高性能复杂动画可换 'canvas'，但 iOS Safari 对 canvas 渲染的某些滤镜支持有限。
lottie.loadAnimation() 的关键参数避坑点
参数写错会导致白屏、报错或动画不动，常见问题集中在路径、容器和跨域上。
立即学习“前端免费学习笔记（深入）”；
-
path必须是相对或绝对 URL，不能是本地文件路径（如file:///协议下会触发 CORS 错误） -
container必须是真实 DOM 元素，且在调用前已存在；若在DOMContentLoaded外执行，建议加document.getElementById()判空 -
loop和autoplay默认为false，不显式设为true就不会动 - 若 JSON 文件放在不同域名下，需服务端配
Access-Control-Allow-Origin，否则控制台报 “Failed to fetch”
如何控制播放、暂停、跳转到指定帧
拿到 animationItem 实例后，所有交互逻辑都靠它。别再用 setTimeout 模拟播放——lottie-web 提供了精确帧控 API。
- 保存返回值：
const anim = lottie.loadAnimation({ ... }); - 播放：
anim.play()；暂停：anim.pause() - 跳转到第 30 帧（假设总帧数 ≥ 30）：
anim.goToAndStop(30, true)；第三个参数true表示不播放，仅定位 - 获取当前帧：
anim.currentFrame；获取总帧数：anim.totalFrames - 监听完成事件：
anim.addEventListener('complete', () => { ... })
注意：goToAndPlay() 会从指定帧开始播放，但若动画已暂停，它不会自动恢复播放状态——得手动跟一句 anim.play()。
为什么动画不显示？几个高频原因
90% 的“白屏”问题不是代码写错，而是环境或资源链路断了。
- 检查浏览器控制台：出现 “
Cannot find module 'lottie-web'” 是路径/CDN 失效；出现 “Failed to load resource” 是path错或 404 - 检查容器尺寸：
div若无宽高（如height: auto且子元素为空），SVG 渲染器可能无法绘制——给容器设width和height（支持vh/vmax等响应式单位） - 检查 JSON 内容：用文本编辑器打开，确认首字符是
{，不是（说明服务器返回了 404 HTML 页面而非 JSON） - AE 导出时勾选了 “
Include in project” 但没嵌入字体？Web 字体未加载会导致文字图层空白——导出时尽量用轮廓化文字（Convert fonts to shapes）
真正麻烦的是 AE 动画里用了不被 Lottie 支持的特性（比如 3D 图层、部分表达式、第三方插件效果），这种只能回 AE 修改，没有运行时补救办法。
