Lottie 动画预览
动画 JSON · 即时播放 · 本地渲染
Lottie 预览
就绪
ABOUT
关于 Lottie 动画预览
导入 Lottie 动画 JSON 文件，在浏览器中实时预览动画，无需 After Effects 或插件。
Lottie 让动效从 After Effects 无缝进入 Web 与移动端，但 JSON 文件无法「用眼看」效果。本地预览让你在集成 lottie-web 之前就能验收资源，减少返工。
DEEP DIVE
深入了解 Lottie 动画预览
Lottie 是 Airbnb 开源的动画格式，用 JSON 描述矢量动画，广泛用于移动端与 Web。但 Lottie JSON 文件无法直接在代码编辑器中预览效果，通常需要 After Effects + Bodymovin 插件或 LottieFiles 在线预览。JSONSort 在浏览器本地渲染 Lottie，粘贴 JSON 即播放。
适合前端验收动效资源、排查 Lottie JSON 是否损坏、快速查看 animation 的 frame rate 与 layer 结构等。
Lottie JSON 由 Bodymovin 导出，包含 layers、shapes、keyframes 等复杂结构。预览器使用 lottie-web 渲染，与生产环境行为高度一致；若预览失败，问题多半在导出设置或 JSON 损坏而非集成代码。
FEATURES
核心能力
即时播放
粘贴 Lottie JSON 后自动加载并循环播放动画。
文件导入
支持 .json 与 .lottie 文件拖拽导入。
本地渲染
动画 JSON 不上传，设计稿动效可保密预览。
错误提示
JSON 不符合 Lottie schema 时给出加载失败提示。
与格式化联动
可先验证 JSON 语法，再切换 Lottie 预览。
零插件
无需安装 AE 或 Lottie 桌面客户端。
.lottie 压缩包
支持 dotLottie 格式自动解压渲染。
循环播放
自动 loop 便于检查首尾帧是否衔接。
HOW TO USE
使用步骤
-
1
粘贴 Lottie JSON 或上传 .json/.lottie 文件
-
2
自动播放动画预览
-
3
调整并导出
-
4
输入变更后视图自动刷新，可反复调整 JSON 观察结构
-
5
截图或复制 JSON 片段用于文档与评审材料
WORKFLOW
典型工作流
从导入数据到导出结果的完整流程，帮助团队统一 Lottie 动画预览 的使用方式。
获取 Lottie JSON
从 Figma/AE Bodymovin 插件或 LottieFiles 下载。
导入预览
拖拽 .json / .lottie 或粘贴 JSON 文本。
验收动效
检查循环、尺寸、颜色是否与设计稿一致。
集成开发
确认无误后复制 JSON 到项目 assets 目录。
USE CASES
适用场景
前端开发
验收设计师提供的 Lottie 资源是否正常播放。
移动端开发
预览 JSON 动画资源，确认 frame 与尺寸参数。
动效设计
导出后快速验证 Bodymovin JSON 是否完整。
QA
回归测试 Lottie 资源更新后的视觉效果。
设计交付
设计师导出 JSON 后自查，再交给开发集成。
性能优化
预览同时观察 layer 数量，评估是否需简化动效。
TIPS
使用技巧
- Lottie JSON 通常较大，拖拽导入比粘贴更稳定。
- 加载失败时先用格式化工具检查 JSON 语法是否正确。
- 预览区可观察动画循环是否 seamless，有无明显跳帧。
- 与 JSON 脑图配合：脑图看 layer 结构，预览看实际效果。
- dotLottie (.lottie) 是压缩格式，工具会自动解压渲染。
- 预览确认无误后再集成到 lottie-web / lottie-react 项目。
- 预览卡顿可能是 layer 过多，请设计侧简化或合并 shape。
- 图片资源外链失败时检查 CORS 或改用内嵌 base64。
- 与格式化工具配合：先验证 JSON 语法再切换 Lottie 模式。
- 集成前确认 frameRate 与项目 CSS animation 无冲突。
LOCAL VS ONLINE
本地 vs 在线工具
JSONSort 坚持纯前端架构，以下对比说明为何本地化工具更适合处理开发数据。
TROUBLESHOOTING
常见误区与排查
实际使用中容易遇到的问题及建议处理方式，减少反复试错的时间。
加载失败
建议：JSON 语法错误或 Lottie 版本不兼容；重新导出 Bodymovin。
图片不显示
建议：外部 URL 被 CORS 拦截；改用 embedded asset。
动画太快/太慢
建议：检查 JSON 内 fr (frame rate) 与 op/ip 帧范围。
预览空白无报错
建议：可能是空 composition；确认 AE 导出前有时间轴内容。
FAQ
常见问题
支持哪些 Lottie 版本？
支持主流 Bodymovin 导出的 JSON 格式。极新特性可能需更新 renderer。
动画能暂停/Seek 吗？
当前自动循环播放。后续可扩展播放控制。
图片资源内嵌的 Lottie 能播吗？
支持内嵌 base64 图片的 Lottie。外部 URL 引用可能受 CORS 限制。
预览与真机效果一致吗？
lottie-web 与 iOS/Android 原生 Lottie 高度一致，极端表达式可能略有差异。
文件超过 1MB 怎么办？
可正常尝试；过大文件建议 dotLottie 压缩或拆分动画。
数据会上传到服务器吗？
不会。JSONSort 所有工具均在浏览器本地运行，您的输入内容不会发送到任何后端服务器。
需要注册或安装吗？
不需要。打开页面即可使用，无需账号、无需下载客户端，也支持 PWA 离线缓存。
支持多大的文件？
取决于浏览器内存，通常可流畅处理数 MB 级别的数据。超大文件建议先拆分或使用合并清理工具。