Lottie 动画在线预览

功能

• 拖入 .json 即可播放，可调速度（0.25× / 0.5× / 1× / 2×）
• 进度条可拖动，逐帧查看细节；每帧显示「当前 / 总帧数」
• 背景可切棋盘格 / 浅色 / 深色 —— 棋盘格用于确认透明区域
• 列出合成信息：尺寸、帧率、帧数、时长、图层数、合成名、bodymovin 版本与生成器
• 交付检查：表达式、内嵌 / 外链图片、帧率过高、时长过长、尺寸过大、老版本导出
• 文件不上传；播放器只在真的拖入文件时才下载（它是全站最大的一个依赖）
• 不是 Lottie 的文件会给出一句明确说明，而不是一片空白

使用方法

1. 把 Lottie JSON 拖进虚线框
2. 播放、慢放、拖进度，看动画本身
3. 读右侧的合成信息与交付检查
4. 带着这些结论去决定要不要在导出时调整（转关键帧、内嵌图片、降帧率）

常见问题

为什么提示我用了「表达式」？

因为那是最容易在移植时踩的坑。Lottie 里的表达式（After Effects 里写在属性上的脚本，导出后存在 `x` 字段里）在浏览器里能跑（这个预览就是证据），但不少移动端播放器不支持 —— react-native-lottie 的一些版本、部分小程序的组件都不支持，那时动画会静止或停在错的位置，而开发者通常会先去怀疑播放器版本。要在那些平台上用，请在 After Effects 里把表达式转成关键帧再导出。

为什么带表达式的文件要我再确认一次？

因为 Lottie 的表达式就是 JavaScript，播放器必须把它当代码执行才能算出动画值 —— 也就是说，一份带表达式的 `.json` 并不只是数据。它在文本编辑器里、在 Git 里都只是普通文本，只有被播放器读进去时才会运行；而「预览一个文件」在直觉上是个只读操作，所以这里不替你做这个决定。 点确认之前值得想一下：这份文件是从哪来的？ 自己导出的、同事给的，放心点。从素材站、群聊、邮件附件里下载的，先别急 —— 用文本编辑器搜一下 `"x":`，看到里面是可读的表达式还是莫名其妙的代码，心里就有数了。 顺带一提，这也是交付时该清理的东西：带表达式的 Lottie 交给别人，等于把一段可执行代码一起交出去了。

图片「内嵌」和「外链」有什么区别？

Lottie 里的位图有两存放方式：内嵌（转成 data URI 写在同一个 JSON 里）与外链（JSON 里只留一个相对路径，图片是单独的文件）。内嵌的文件自包含、搬到哪儿都能用，代价是体积大；外链的把 JSON 单独拷走就会缺图，而播放器通常不报错 —— 只是少了几块，很容易以为是动画本身的问题。选哪种看用途：要走 CDN 分发的小图标适合内嵌，大图适合外链。

为什么说帧率超过 60 是浪费？

因为多数设备（尤其是手机）的屏幕刷新率就是 60Hz，高于 60fps 的帧根本刷不出来，而 Lottie 的每一帧数据都要写进文件（关键帧插值要逐帧算），于是多出来的帧只增加体积、不影响观感。60fps 已经是流畅的上限，30fps 对多数 UI 动效完全够用 —— 导出前降到 30 或 60 通常能显著减小文件。

这个预览和真实项目里播放的效果一样吗？

一模一样，因为它们用的是同一个播放器：`lottie-web`（Airbnb 官方实现）—— 网页里用它、小程序与 RN 用的是各自的移植版，那些移植版才是「可能不一样」的地方。所以这一页最有价值的用法是：先在这里确认动画本身没问题，再去目标平台上验证那份移植版。另外慢放（0.25×）是检查动效细节最有效的办法，很多在正常速度下看不出来的抖动、错位、层级问题，慢下来一眼就能看见。