无需登录 数据私有 本地保存

Lottie动画至SVG帧拆分 - 解析关键帧

12
0
0
0
拖拽 Lottie JSON 文件到此处 或 点击上传
支持 .json 格式的 Lottie/Bodymovin 动画文件
常见问题

Lottie 是 Airbnb 开源的动画格式，基于 JSON 描述矢量动画。它将 After Effects 动画导出为轻量级 JSON 文件，通过 Lottie 播放器在 Web/App 中渲染。导出为 SVG 帧后，您可以获得每一帧的独立矢量图形，便于进一步编辑、静态展示或将特定帧嵌入到不依赖 Lottie 库的页面中。SVG 作为开放标准，兼容所有现代浏览器，且支持无损缩放。

关键帧（Keyframe）是动画中定义属性变化的时间点。在 Lottie JSON 中，关键帧数据存储在图层属性的 "k" 数组中，每个关键帧包含时间 "t"（帧编号）和对应的值。本工具会递归扫描整个 JSON 结构，自动收集所有属性的关键帧时间点，去重排序后在时间轴上标记出来，方便您快速定位动画的重要时刻。

导出的 SVG 帧用途广泛：① 作为静态矢量插图嵌入网页或文档；② 导入 Figma/Sketch/Illustrator 等设计工具进行二次创作；③ 制作 SVG 精灵图或图标集；④ 在不支持 Lottie 的环境中展示动画的特定状态；⑤ 用于生成动画预览缩略图；⑥ 作为矢量素材用于印刷品设计。每一帧都是独立、完整、可缩放的矢量图形。

这通常发生在 Lottie 动画引用了外部图像资源（如 PNG/JPG 纹理）时。由于导出的 SVG 中图像引用指向原始 URL，如果该 URL 不可访问或已失效，图像部分将无法显示。纯矢量形状动画（无外部资源依赖）导出的 SVG 是完全自包含的，不会有此问题。建议在上传前确认动画的资源引用方式。

本工具基于 lottie-web（Bodymovin）渲染引擎，支持 Lottie 5.x 及以下版本的大多数矢量特性，包括形状图层、固态图层、文本图层、预合成、蒙版、修剪路径、渐变填充等。对于 Lottie 6.x 及更新的特性（如渐变描边、混合模式增强等），兼容性取决于底层渲染库的版本。表达式（Expressions）支持有限。

导出帧率决定了每秒提取多少帧。原始帧率（从 JSON 的 "fr" 字段读取）是动画的设计帧率。降低导出帧率（如从60fps降到30fps）会减少导出帧数，ZIP包更小，适合生成缩略图序列；提高导出帧率会插值生成更多帧，但不会增加动画细节。建议保持与原始帧率一致以获得最佳保真度。
知识点：Lottie 动画的帧结构

Lottie JSON 文件核心包含 fr（帧率）、ip（入点帧）、op（出点帧）、w/h（画布尺寸）和 layers（图层数组）。每个图层可包含形状（shapes）、变换（transform）、样式等属性。属性值若为静态，直接存储；若为动画，则存储为关键帧数组，每个关键帧记录时间戳 t、起始值 s、结束值 e 及缓动曲线参数 i/o。理解这一结构有助于在代码层面操作和修改 Lottie 动画。

🔧 相关工具