如何用Lottie制作HTML5动画_Lottie动画集成方法【轻量教程】_技术教程

最稳妥方式是用 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）