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

Lottie 动画在线预览器 - 加载 JSON 动画文件播放

多媒体 开发工具 JSON Lottie 动画 预览
25
0
0
0
上传 Lottie JSON 文件

拖拽文件到此处，或点击选择文件

也支持从 URL 加载或粘贴 JSON 内容
预览
背景：

暂无动画

上传 Lottie JSON 文件或粘贴 URL 开始预览

常见问题

Lottie 是一种基于 JSON 的动画格式，由 Airbnb 开发并开源。它允许设计师在 After Effects 中创建动画，通过 Bodymovin 插件导出为 JSON 文件，然后在 Web、iOS、Android 等平台上原生渲染。Lottie 动画体积小、可缩放、支持交互，比传统 GIF 或视频更高效。

在 Adobe After Effects 中安装 Bodymovin 插件，创建动画后通过 Bodymovin 面板导出为 JSON 文件。也可以使用 LottieFiles 插件或其他兼容工具。导出时注意：Lottie 支持有限的 AE 特性，建议使用形状图层、文本图层和固态图层，避免使用复杂的表达式和效果。

文件更小：JSON 矢量数据远小于逐帧位图，通常只有 GIF 的 10%-30%。
无限缩放：基于矢量，任意分辨率都清晰。
可交互：支持程序控制播放、速度、方向、进度等。
透明度：原生支持 Alpha 通道，无需额外处理。
性能更好：使用 GPU 加速的 SVG/Canvas 渲染。

可能的原因：
1. 文件不是有效的 Lottie JSON 格式（缺少必要字段如 v、fr、layers 等）。
2. JSON 文件损坏或格式错误。
3. 使用了 Lottie 不支持的 AE 特性。
4. 文件过大导致解析超时。
5. URL 加载时遇到 CORS 跨域限制。建议下载文件后通过本地上传。

Web 端使用 lottie-web 库：
npm install lottie-web 或通过 CDN 引入。
调用 lottie.loadAnimation() 加载 JSON 并渲染到指定容器。
iOS 使用 Lottie pod，Android 使用 Lottie 依赖库。
也支持在 React、Vue、Flutter 等框架中通过对应封装使用。

1. 简化路径和形状，减少不必要的关键帧。
2. 使用表达式而非逐帧动画。
3. 合并相似图层，减少图层数量。
4. 避免嵌入大型位图资源。
5. 使用 LottieFiles 的优化工具或在线压缩服务。
6. 导出时选择压缩选项。
7. 考虑使用 .lottie 格式（基于 zip 的压缩格式）。
🔧 相关工具