SVG 转 Lottie 动画
免费在线工具，将 SVG 矢量图形转换为 Lottie JSON 格式的动画文件，支持基本形状、路径、填充、描边和 SVG 动画元素。
SVG 输入
拖拽 SVG 文件到此处，或点击上传
转换设置
帧率 (FPS)
动画时长 (秒)
动画名称
SVG 预览
功能特点
- SVG 转 Lottie：将 SVG 图形转换为 Lottie JSON 动画格式
- 支持常见 SVG 元素：路径 (path)、圆形、矩形、椭圆、线条、多边形等
- 动画支持：识别 SVG 中的
<animate>和<animateTransform>元素 - 实时预览：Lottie 动画实时播放预览
- 本地处理：所有转换在浏览器本地完成，保护数据隐私
- 一键导出：支持复制 JSON 或下载 .json 文件
- 可调参数：自定义帧率、动画时长和动画名称
什么是 Lottie？
Lottie 是由 Airbnb 开源的一种动画格式，基于 JSON 描述动画。它使用 Bodymovin 插件从 After Effects 导出，或通过代码生成。Lottie 动画可以在 Web、iOS、Android 和 React Native 等平台渲染，具有体积小、跨平台、可交互等优点。
Lottie JSON 结构
{
"v": "5.9.6",
"fr": 30,
"ip": 0,
"op": 60,
"w": 512,
"h": 512,
"nm": "Animation",
"ddd": 0,
"assets": [],
"layers": [...]
}
支持转换的 SVG 元素
| SVG 元素 | Lottie 对应 |
|---|---|
<path> | Shape (bezier path) |
<circle> | Shape (ellipse path) |
<rect> | Shape (rectangle path) |
<ellipse> | Shape (ellipse path) |
<line> | Shape (line path) |
<polygon> | Shape (polygon path) |
<polyline> | Shape (polyline path) |
<g> | Group layer |
<animate> | Keyframe animation |
<animateTransform> | Transform animation |
支持转换的动画属性
- opacity：透明度动画
- transform (translate)：平移动画
- transform (scale)：缩放动画
- transform (rotate)：旋转动画
- fill：填充颜色动画
- stroke-width：描边宽度动画
常见问题
什么是 Lottie？
Lottie 是 Airbnb 开源的一种基于 JSON 的动画格式。它由 Bodymovin 插件从 After Effects 导出，可以在 Web、iOS、Android 等平台渲染，具有体积小、跨平台、可交互等优点。
支持哪些 SVG 特性？
支持常见的 SVG 图形元素（路径、圆形、矩形、椭圆、线条、多边形），以及填充、描边、透明度。同时支持 `<animate>` 和 `<animateTransform>` 动画元素。
生成的 Lottie 文件可以在哪里使用 ？
生成的 Lottie JSON 可以在支持 Lottie 的任何平台使用，包括 Web (lottie-web)、iOS (lottie-ios)、Android (lottie-android)、React Native 等。
转换后的数据安全吗？
所有转换在浏览器本地完成，SVG 数据不会上传到服务器，您的数据完全安全。
Lottie 和 GIF/APNG 有什么区别？
Lottie 是矢量动画格式，可以无限缩放不失真，文件体积通常比 GIF 更小，支持交互操作，渲染性能更好。
复杂的 SVG 文件能完整转换吗？
工具支持常见的 SVG 元素和动画属性。对于包含复杂滤镜、渐变、遮罩等高级特性的 SVG，部分特性可能无法完整转换。
分享此工具