loadAnimation基本调用正确，但默认不自动播放需显式设autoplay:true；容器必须存在且具宽高，path与animationData二选一，renderer默认svg，JSON须由Bodymovin 5.7+导出。
loadAnimation 方法的基本调用是否正确？
Lottie 的 loadAnimation 不是自动播放的“一键函数”，它返回一个动画实例，但默认行为取决于 JSON 文件本身和传入参数。常见错误是只写调用却不检查容器、路径或参数拼写：
- 容器元素必须存在且有明确尺寸（
width/height），否则动画渲染区域为 0×0，看起来“没动” -
animationData和path二选一：本地 JSON 推荐用path（字符串 URL），直接内联数据才用animationData -
renderer默认是"svg"，若 AE 动画含大量遮罩或 3D 层，可能需改用"canvas"或"html"才能正常显示 - 必须确保 JSON 是由 Bodymovin 5.7+ 插件导出，旧版导出的
assets结构不兼容新 Lottie Web
const anim = lottie.loadAnimation({
container: document.getElementById('lottie-container'),
renderer: 'svg',
path: '/animations/hero.json',
loop: true,
autoplay: true
});
AE 导出 JSON 后播放异常的典型原因
Bodymovin 导出时若勾选了不兼容选项，或 AE 工程用了不支持的特性，JSON 就会“静音”或卡在第一帧：
- 使用了表达式中的
time、index等动态属性，但未启用 Bodymovin 的 “Include expressions” 选项 - 启用了“Trim Paths”但未勾选 “Preserve aspect ratio” → 渲染时路径错位或消失
- 文字图层未转为形状（Convert to shapes），导致字体缺失 → 整个图层不显示（Lottie 不加载外部字体）
- 合成尺寸与导出设置中 “Scale” 不一致，造成缩放失真或裁剪
建议导出前在 AE 中：
- 关闭所有 3D 图层（Lottie 对 3D 支持有限）
- 避免使用摄像机、灯光、粒子系统等非矢量效果
- 检查预合成嵌套深度，超过 4 层易触发渲染异常
autoplay 为 true 却不播放？检查这三件事
autoplay: true 只控制初始化后是否自动开始，但浏览器策略、资源加载状态、脚本执行时机都会打断它：
dmap-jsapi-skill
下载
DMap GL地图JSAPI（dmapgl）开发指南。用于编写、审查、调试 DMap 地图 API 代码，涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。
立即学习“前端免费学习笔记（深入）”；
- JSON 文件 404 或 CORS 报错 → 控制台出现
Failed to load resource，loadAnimation内部静默失败，不会抛异常 - 脚本在 DOM 加载前执行 →
container为null，Lottie 会报Cannot read property 'appendChild' of null - 页面启用了节流策略（如 Chrome 的
document.visibilityState === 'hidden'）→ 动画初始化后被暂停，需手动调用anim.play()
可加简单兜底：
const anim = lottie.loadAnimation({ /* ... */ });
anim.addEventListener('DOMLoaded', () => {
if (!anim.isLoaded) return;
anim.play(); // 确保触发
});
如何调试 JSON 加载失败或渲染空白？
不要只盯着 JS 代码，先确认资源链路是否通：
- 直接在浏览器地址栏打开
path对应的 JSON URL，看能否正常下载并显示为格式化 JSON（不是 404 或 HTML 页面） - 打开开发者工具 → Network 标签页，过滤
json，检查该请求的状态码、响应头（尤其Content-Type: application/json） - 在 Console 中输入
lottie，确认全局对象存在；再输入anim（变量名）看是否为有效实例，anim.totalFrames是否大于 0 - 若
anim.totalFrames === 0，基本可判定 JSON 结构异常，大概率是 Bodymovin 导出失败或 AE 工程损坏
AE 动画越复杂，JSON 越容易在导出环节丢帧、漏图层或误转译 —— 真实项目里，80% 的“播不出”问题其实出在 AE 工程准备阶段，而不是 loadAnimation 写得不对。
