动画JSON文件怎么打开播放
拿到一个
.json、.zip或.lottie动画文件,怎么在手机上把它播出来:三种扩展名认一认、三种加载入口选一选、常见失败先绕开。相关文档:AE动画怎么导出JSON给手机播放.md · 手机动画播放卡顿掉帧怎么排查.md
一、先认扩展名,别拿错文件
Lottie 动画最常见的载体有三种:
| 扩展名 | 里面是什么 | 什么时候会遇到 |
|---|---|---|
.json | 标准 Lottie 动画,文本格式,几十 KB 很常见 | 动画只用矢量形状时,这一个文件就够 |
.zip | json 与图片素材打在一起的包 | 动画里嵌了位图;少图片就会白一块 |
.lottie | dotLottie 打包格式,一个文件可装多个动画 | 从素材平台下载时常见 |
判断方法很直接:用文本编辑器打开,开头是 {、里面有 "v"、"fr"、"layers" 这类键,就是 json 动画本体;顺手还能读出 w/h(画布尺寸)与 fr(帧率)。打不开的压缩包则是 zip 或 lottie。
二、手机上用什么播
要播这类文件,手机上得有一台播放器。Lottie 开源方出的示例播放器就是干这个的:内置一批示例动画,也能读本机文件和网络直链,装好就能用。它的获取方式与安装步骤,在 Lottie 手机预览播放器这篇介绍里写得比较全,这里不重复。
装好后先播一个内置动画——内置的能播,说明应用与手机的渲染环境没问题,之后遇到播放失败,问题基本都出在文件或网址上,排查方向一下子就窄了。
三、本机文件这样放,成功率最高
加载本机文件最容易卡在「文件没放对地方」:
- 把动画文件放进手机的
Download目录,别藏在聊天软件的缓存目录里(文件管理器经常看不到); - 不要改扩展名——下载工具有时会在文件名后面加后缀,扩展名被动过,播放器就认不出来;
- 打开播放器选「从存储加载」这类入口,在文件选择器里定位到文件;
- 画面开始动就是成功;没反应按第五节的现象表对。
图片空白是本机加载最常见的翻车点:动画里嵌了位图时,图片不在 json 里,必须和 json 打在同一个 zip 里(图片文件名不能改)。手里只有一个孤零零的 .json,图片位置就会缺一块——回去要打包好的 zip。
四、网络直链的门槛
网络加载填的必须是能直接返回文件本身的地址:浏览器里打开它,就应该开始下载、或直接显示一大段 {...} JSON。三类地址不能用:
- 网页地址(打开是介绍页、播放页,不是文件本身);
- 需要登录、或带临时签名会过期的分享链(昨天能用的地址今天可能就失效);
- 被网盘「提取码」拦在中间的地址(要先在网盘里拿到真实下载地址)。
另外它是当场取文件的,断网就读不到。
五、没播出来,对现象找原因
| 现象 | 多半是这个原因 |
|---|---|
| 点了文件什么都没发生 | 扩展名被改过,或文件根本不是动画本体(网页另存下来的那种) |
| 动画出来了但图片位置空白 | 位图没跟着 json 走,缺打包好的 zip |
| 一直转圈 | 文件特别大,等几秒或换个小文件对照 |
| 网址加载失败 | 地址类型不对或已过期,按第四节重新取直链 |
现象对不上、怎么换都不行的,往性能方向查——遮罩蒙版开销、设备带不带得动,是另一类问题,见 手机动画播放卡顿掉帧怎么排查.md。文件从哪来的问题,回 AE动画怎么导出JSON给手机播放.md 看导出环节。