FIMO导出的HTML不含遮罩动画,仅为静态快照;需手动添加CSS mask/clip-path动画或基于exportJSON自研播放器实现动效。

HTML输出里没有遮罩动画信息
FIMO 本身不生成带遮罩(mask)或 SVG clip-path 动画的 HTML 输出。它导出的 HTML 是静态快照,仅保留当前帧的 DOM 结构和内联样式,fimo.exportHTML() 不会注入 CSS 动画、@keyframes 或 mask/clip-path 的过渡逻辑。
遮罩动效必须手动补全
如果你在 FIMO 编辑器里用了遮罩动画(比如渐显、擦除、圆形缩放等),导出后这些效果就“冻结”在最后一帧。要还原动效,得自己写 CSS:
-
mask或clip-path需用 CSS 自定义属性或 JS 控制起始/结束值 - 动画需搭配
transition(简单缓动)或@keyframes(复杂路径) - 若原效果依赖时间轴关键帧,得对照 FIMO 时间线手动拆解为 CSS 时间点(例如 0% → 30% → 100%)
- 注意浏览器兼容性:
mask在 Safari 旧版需-webkit-mask前缀;clip-path的path()函数在部分安卓 WebView 中不支持
怎么判断导出 HTML 是否含动效线索
打开 FIMO 导出的 HTML 文件,检查以下位置:
- 查看
块或内联属性中是否有mask、clip-path、animation、transition相关声明 —— 通常没有 - 搜索
data-fimo-属性(如data-fimo-mask="circle"),FIMO 有时会保留少量元数据,但不用于运行时渲染 - 检查是否有
加载了fimo-player.js或类似运行时 —— 标准exportHTML不包含这个
替代方案:用 FIMO 的 JSON + 自研播放器
如果必须复现遮罩动画,更可靠的做法是:
立即学习“前端免费学习笔记(深入)”;
- 用
fimo.exportJSON()导出带时间轴、遮罩类型、参数变化的原始数据 - 用 JS 解析 JSON,在 HTML 中动态创建
或并绑定requestAnimationFrame更新mask-position或clip-path字符串- 避免依赖 FIMO 渲染器的私有格式,比如
mask: url(#fimo-mask-1)这类 ID 引用在导出 HTML 中不会自动带对应遮罩动效不是“导出即得”,而是从 JSON 数据出发重实现 —— 这步绕不开,也最容易在交接时被当成“FIMO 已经导出了”。
- 避免依赖 FIMO 渲染器的私有格式,比如











