FIMO导出HTML时图层被扁平化为静态PNG,无法通过CSS或DOM还原原始叠放关系;需改用json+png模式导出并手动解析fimo.json重建图层DOM结构。

FIMO 输出 HTML 时默认不保留原始图层顺序,图层会被扁平化为静态 PNG 像素,无法通过 CSS z-index 或 DOM 层级还原原始叠放关系。
为什么 FIMO 导出的 HTML 看似有“图层”但实际不可控
FIMO 的 HTML 导出本质是将当前时间点的合成结果(含所有可见图层、遮罩、变换)渲染为单张 如果你依赖图层独立控制(比如点击切换某元素显示、拖拽调整叠放),必须在导出后手动改造: 关键配置项直接决定你能否拿到可用的图层元数据: 立即学习“前端免费学习笔记(深入)”; 真正保留图层顺序这件事,不在 FIMO 的 HTML 输出职责范围内。它输出的是“快照”,不是“编辑器”。要实现动态图层控制,得把 FIMO 当作资源生成器,而不是运行时引擎 —— 这个边界不厘清,后续所有 DOM 操作都会踩空。 标签或 Canvas 帧。即使你看到多个
Preserve layer hierarchy(如果存在)仅影响 JSON 数据结构,不影响 HTML 渲染输出Track Matte、Blending Mode、3D Layer 在 HTML 中均被预合成,不可动态开关HTML + JS 模式导出,图层信息会写入 fimo.json,但需自行用 JS 解析并重建 DOM —— FIMO 不自动生成可交互的图层控制逻辑想让 HTML 里能控制图层显隐/顺序?得自己补逻辑
JSON + PNG 序列(而非纯 HTML),确保启用 includeLayerInfo: true 配置fimo.json,遍历 layers 数组,按 index 或 parentID 还原层级树,用 
z-index 模拟原始 layer index
index 是从 1 开始的整数,但 JSON 里可能被重映射;inPoint/outPoint 决定该图层在时间轴上的活跃区间,需配合 JS 动画库(如 GSAP)做条件显隐FIMO 的
exportSettings.json 里哪些字段影响图层输出
exportMode: "json+png" —— 必须设为此值,"html" 模式会丢弃图层结构includeLayerInfo: true —— 否则 fimo.json 中无 layers 字段flattenLayers: false —— 即使设为 false,HTML 渲染器仍会合成;此参数只影响 JSON 是否保留子图层引用useBase64: false —— 设为 false 才能拿到独立 PNG 文件,方便按图层名加载(如 layer_name_0001.png)











