动画不显示是因为容器未挂载、无宽高或路径错误；renderer选svg更稳妥；loop/autoplay需显式设true；AE文字须转形状；停最后一帧要设loop:false且op对齐；lottie-player属性用字符串如loop="false"。
直接用 lottie-web 加载 JSON 就能跑起来，不用框架、不配构建工具，但容器尺寸、路径写法、加载时机这三点错一个就白屏。
为什么动画不显示？先查这三个硬性条件
白屏不是代码写错了，大概率是基础条件没满足：
-
container必须是真实 DOM 元素，且调用lottie.loadAnimation()前已挂载到页面——别在window.onload里初始化，改用document.addEventListener('DOMContentLoaded', ...) - 容器元素（比如
<div id="lottie"></div>）必须有明确宽高，width: 100%; height: 200px;这类 CSS 是强制要求，Lottie 不会自动撑开父容器 -
path必须是相对或绝对 URL，不能是本地file://协议路径；若 JSON 放在不同域名下，服务端需配Access-Control-Allow-Origin，否则控制台报Failed to fetch
用 lottie.loadAnimation() 时哪些参数最容易踩坑
参数名看着简单，但写错值会导致静默失败或行为异常：
-
renderer: 'svg'是默认且最稳妥的选项，兼容性好、缩放清晰；'canvas'虽性能略高，但在 iOS Safari 上对滤镜/clipPath 支持不稳定，慎用 -
loop和autoplay默认都是false，不显式设为true动画根本不会动 -
path值必须带后缀（如'./animation.json'），漏掉.json或写成'animations/data'会 404 - 导出 JSON 时 AE 里文字图层没转成形状（右键 →
Create Shapes from Text），动画区域会空白
怎么让动画播完停在最后一帧，而不是跳回开头
这不是靠 CSS 或定时器，而是靠 Lottie 自身的时间逻辑控制：
立即学习“前端免费学习笔记（深入）”；
- 必须设
loop: false，否则动画结束立刻重播，根本停不住 - JSON 文件本身的
op字段（Out Point）要对齐设计终点帧，打开 JSON 搜索"op"确认数值，比如 Logo 在第 58 帧完成，就该是"op":58 - 如果要用 JS 精确跳到某帧再停住，得用
anim.goToAndStop(frame, true)，第三个参数true表示只定位、不播放 - 监听
'complete'事件比用setTimeout可靠得多：anim.addEventListener('complete', () => anim.stop())
用 <lottie-player> 组件时属性怎么写才生效
这个 Web Component 看似简单，但属性名和取值类型很敏感：
-
loop="false"是字符串写法，不是loop={false}（那是 React/Vue 的 JSX 语法）；loop="0"或空字符串loop=""都无效 -
hover和autoplay同时存在会冲突——hover已隐含“悬停时播放”，加了autoplay反而导致首次加载后立即循环 -
background="transparent"要显式声明，否则默认黑底，遮盖页面背景 - 组件内部不响应
animation-play-state这类 CSS 动画控制，所有交互必须走属性或 JS API
真正卡住人的地方往往不在 API 多难，而在 JSON 文件导出时 AE 图层没转形状、容器没设宽高、或者以为 loop="false" 写成布尔值就能生效——这些细节不验证，调试半天也找不到根因。
