json动画需符合特定schema（如lottie要求layers、assets、framerate等字段），由第三方库解析渲染，非浏览器原生支持；导出须选svg渲染器、校验路径与id一致性、容器响应式设置及性能优化。
JSON动画数据结构怎么写才被解析器识别
浏览器原生不支持直接用JSON驱动HTML5动画，必须靠第三方库（比如Lottie、Rive或自研播放器）读取并渲染。这意味着JSON不是“拿来就能动”，它得符合特定schema——比如Lottie要求animations字段下有layers、assets、framerate等关键键名，缺一个就报Invalid JSON structure。
- 常见错误：导出时勾选了“压缩JSON”但没关“去除空格”，导致
renderer读取失败（某些老版本Lottie Web会卡在undefined is not an object (evaluating 'd.layers')） - 使用场景：AE用Bodymovin插件导出时，务必选
SVG渲染器而非Canvas——后者生成的JSON里ip/op（inPoint/outPoint）可能被截断，造成动画只播半秒 - 参数差异：
framerate设为60不等于真能跑60fps，实际受requestAnimationFrame节流和DOM重绘开销限制；移动端常掉到30fps，建议在JSON里把framerate设为30更稳
Lottie Web加载后不动/白屏的排查顺序
不是代码写错，大概率是资源链路断了。Lottie JSON本身不含图形数据，assets数组里存的是外部图片或字体路径，这些路径一错，整个动画就挂。
- 检查
assets里的id是否和layers中引用的refId完全一致（区分大小写，且不能有空格） - 图片路径如果是相对路径，要确认加载JSON的HTML页面URL与图片所在目录的相对关系——比如JSON里写
"p": "images/icon.png"，但HTML在/page/index.html，就得确保图片实际在/page/images/icon.png - 遇到
Failed to load resource: the server responded with a status of 404 ()，别急着改JS，先打开浏览器Network面板，过滤img类型，看哪个icon.png标红了
如何让JSON动画响应式适配不同屏幕
JSON里所有坐标、尺寸都是抽象单位（非px），靠容器DOM控制最终呈现大小。所以“适配”不在JSON里改，而在lottie-player或lottie-web的容器上做手脚。
- 别给
<div id="anim">写固定<code>width: 200px，改用max-width: 100%+height: auto，再配合object-fit: contain（如果用<iframe></iframe>或<img alt="HTML5动画怎么做导入JSON定义动画_数据驱动动效说明【说明】" >方式加载） - 用
lottie-web时，rendererSettings里的preserveAspectRatio必须设为"xMidYMid meet"（默认值），否则缩放后元素会被裁切 - 性能影响：在
window.resize里反复调用anim.setSize(w, h)会导致重绘抖动，应加防抖，且只在宽度变化超过10px时才触发 - 想循环：初始化时传
loop: true，但注意这会让anim.play()永远不触发complete事件 - 想播完回起点：监听
complete事件，然后调用anim.stop()+anim.goToAndStop(0, true)（第二个true表示立即应用，不触发过渡） - 容易踩的坑：用
anim.setDirection(-1)倒播后，再play()会继续倒播，不是正向重启——得先setDirection(1)再play()
为什么动画播完自动停在最后一帧而不是回到开头
这是Lottie默认行为，不是bug。JSON里ip/op定义了时间区间，播放器播到op就暂停，除非显式调用anim.goToAndPlay(0, true)。
立即学习“前端免费学习笔记（深入）”；
JSON动效真正的复杂点不在格式，而在“数据”和“上下文”的耦合：同一份JSON，在AE里预览是流畅的，放到网页里卡顿，往往是因为字体缺失、图片太大、或容器CSS触发了强制同步布局。这些细节不报错，但动画就是不动——得靠Network和Performance面板交叉验证，而不是盯着JSON文件本身。
