DOC软件文档百宝箱

手机动画播放卡顿掉帧怎么排查

Lottie 动画在手机上播着卡、掉帧、和设计稿对不上:用渲染图表定位问题,分清「文件太重」还是「设备带不动」,再把锅甩回该负责的那一端。相关文档:动画JSON文件怎么打开播放.md · AE动画怎么导出JSON给手机播放.md


一、先看图表,再下结论

「感觉有点卡」不算数,先开播放器里的实时渲染图表再说话。Lottie 示例播放器的右上角菜单里就有这个入口,图表上画着两条参考线:

曲线长时间压在参考线以上,这条动画在这台手机上就跑不满帧。真机验收就该这么验——编辑器里看着流畅不算数,装到手机上过一遍才算数。播放器怎么装、图表在哪,Lottie 手机预览播放器的介绍页里有完整说明。

二、三次对照,把问题定位到一处

拿到一个卡顿的动画,按这个顺序对照:

  1. 换一个内置动画:内置的流畅而你的卡,问题在文件;内置的也卡,问题在设备;
  2. 换一台手机播同一个文件:高端机流畅、低端机卡,说明文件性能开销偏大但还能救(简化);两台都卡,文件确实太重;
  3. 换一个你的动画:只有一个文件卡,就针对这个文件改;一堆都卡,检查设备状态(后台占用、省电模式、发热降频)。

三次对照做完,问题基本落在「文件 / 设备」二者之一,不用再猜。

三、文件太重,常见的四个原因

性能开销最大的因素,官方资料里点过名的这几个:

原因为什么费怎么救
遮罩与蒙版(masks / mattes)开销与被遮罩区域的交集大小成正比,越大越费缩小遮罩面积;亮度遮罩换 Alpha 遮罩(安卓端本来也不支持 Luma)
路径关键帧动画每个顶点、每个关键帧都要存一份数据用父子级关系替代复制关键帧
「每帧一个关键帧」的手法自动描摹、wiggler 这类操作让 json 暴涨表达式烘成关键帧后手动精简
隐藏图层、深层嵌套合成全都跟着导出,一层不少导出前清理图层结构

这些都是在制作端(After Effects)改的,播放端改不了——验收发现文件太重,能做的就是把上面这张表甩给做动画的同事。

四、画面和设计稿对不上

文件能播,但和 AE 里看到的不一样,按现象对:

现象多半是这个原因
整段动画没动、或节奏乱掉用了表达式,导出前没烘成关键帧
特效、发光、模糊没出来效果菜单里的效果不导出;图层样式同样不支持
遮罩效果在安卓上不生效亮度遮罩(Luma Matte)安卓端不支持,换 Alpha 遮罩
颜色变成一块实色渐变设置有问题,导出环节的老毛病
画面被裁、整体偏大偏小画布按视频思路做了;播放端把 px 当 dp 渲染,合成该按手机尺寸做

拿不准某个特性到底支不支持,查项目文档的特性支持表(Supported Features)——它按 Android / iOS / Web 逐项列结论,安卓端与网页端不完全一致,同一个文件网页上好好的、手机上不对,很常见。

五、还有一类「报错」是版本年代问题

把动画接进自己应用的开发者,可能碰到 Missing values for keyframe 这类解析报错。社区有经验贴指出:播放端依赖的 Lottie 库版本低于 3.0,读不了新版导出格式——升级依赖就能解决。拿手机播放器播现成文件的用户通常碰不到这类报错。

排查顺序没头绪时,回 动画JSON文件怎么打开播放.md 先确认文件本身能正常播;制作端的问题与导出设置的坑,见 AE动画怎么导出JSON给手机播放.md。

同站更多