FIMO输出HTML会保留图层顺序吗_FIMO输出HTML图层排序数据【解析】

看不見的法師 2026-01-25 00:00:00 次阅读

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

FIMO 输出 HTML 时默认不保留原始图层顺序，图层会被扁平化为静态 PNG 像素，无法通过 CSS z-index 或 DOM 层级还原原始叠放关系。

为什么 FIMO 导出的 HTML 看似有“图层”但实际不可控

FIMO 的 HTML 导出本质是将当前时间点的合成结果（含所有可见图层、遮罩、变换）渲染为单张标签或 Canvas 帧。即使你看到多个 容器，它们只是用于响应式布局或动画分段，不是原始 AE 图层的映射。


导出设置中勾选 Preserve layer hierarchy（如果存在）仅影响 JSON 数据结构，不影响 HTML 渲染输出
AE 中的 Track Matte、Blending Mode、3D Layer 在 HTML 中均被预合成，不可动态开关
若用 FIMO 的 HTML + JS 模式导出，图层信息会写入 fimo.json，但需自行用 JS 解析并重建 DOM —— FIMO 不自动生成可交互的图层控制逻辑


想让 HTML 里能控制图层显隐/顺序？得自己补逻辑
如果你依赖图层独立控制（比如点击切换某元素显示、拖拽调整叠放），必须在导出后手动改造：

用 FIMO 导出 JSON + PNG 序列（而非纯 HTML），确保启用 includeLayerInfo: true 配置
读取生成的 fimo.json，遍历 layers 数组，按 index 或 parentID 还原层级树
为每个图层创建独立 ，用 z-index 模拟原始 layer index

注意：AE 中图层的 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）

真正保留图层顺序这件事，不在 FIMO 的 HTML 输出职责范围内。它输出的是“快照”，不是“编辑器”。要实现动态图层控制，得把 FIMO 当作资源生成器，而不是运行时引擎 —— 这个边界不厘清，后续所有 DOM 操作都会踩空。