PAG动画研究

阅读文章大约需要6分钟

一、什么是PAG

官方定义：PAG（Portable Animated Graphics） 是一套完整的动画工作流。提供从AE导出插件，到桌面预览工具PAGViewer，再到各端的跨平台渲染 SDK。

二、PAG的优势

1、动画文件小，解码速度快

• 相比Lottie的json数据，PAG借鉴SWF开源文件格式，采用二进制数据结构，压缩效率更高，解码速度更快，可单文件交付的优势。
• 文件大小，PAG利用动画文件特点，获得极高压缩率，跳过大量默认存储，使用比特位紧凑存储，相同动画内容比同类型方案平均减少50%左右的文件大小。性能方面，PAG实时渲染性能可以达到lottie的1.5~2.5倍。

2、AE特性支持

• Lottie仅支持矢量导出，矢量主动只能实现AE特性的一个子集。
• PAG不仅矢量导出支持更多AE特性，还引入视频序列结合矢量混合导出功能，实现AE特性同时，保持动画运行的可编辑性。

3、配套工具全，支持实时预览

• 不同Lottie、SVGA, PAG动画渲染绘制是C++层实现的，自研2D图形渲染库，不依赖平台渲染接口，实现各平台渲染一致性。
• 桌面预览工具PAGViewer确保了渲染结果和移动端一致，方便设计师看到移动端效果。同时提供性能检测面板，帮助工程师根据素材量化性能指标优化。

三、实验分析

实验一：小礼物-真机

环境

• 测试文件：勋章动画
• 测试设备：华为p30
• 性能检测工具：adb、as profiler

性能数据

指标\类型	pag	svga	MP4
文件大小	402kb	509kb	1462kb
内存大小	11M	20M	10M
cpu占比	50% - 70%	30% - 45%	25 - 35%
FPS卡顿率	0.6% - 1%	2% - 3%	7 - 10%

结论

• PAG相对SVGA和MP4，CPU占比较高，其它方面表现都较好。官方支持组件在文件格式、UI渲染、缓存机制等方面实现较好。

实验二：小礼物-模拟器

环境

• 测试文件：勋章动画
• 测试设备：雷电模拟器
• 性能检测工具：adb、as profiler

性能数据

指标\类型	pag	svga	MP4
文件大小	402kb	509kb	1462kb
内存大小	11M	21M	9M
cpu占比	18% - 22%	9% - 14%	25 - 30%
FPS卡顿率	0.7% - 1%	0.8% - 1.2%	20% - 22%

结论

• pag 各项指标表现不错，相对真机cpu降了些，部分高级编辑功能不支持，多个播放，无明显异常。
• svga 内存多，其它表现不错，多个播放，内存翻倍。
• MP4 文件大，FPS卡顿严重，cpu占比高，内存较少，多个播放，无明显异常。

实验三：大礼物

环境

• 测试文件：大动画（mp4文件大小3M、pag文件大小4M）
• 测试设备：华为p30、雷电模拟器
• 性能检测工具：adb、as profiler

现象

• 礼物动画，模拟器pag超过5个会卡死，mp4超过6个会卡死，华为p30真机能正常播。

结论

• pag对cpu占用多些，会引起手机发烫，模拟器cpu占用比真机稍好。
• 对内存消耗少些，不容易被系统杀死，卡顿差不多，渲染好些但cpu占用多些。

总结

• 从性能上说，pag和MP4、svga等动画方案相比性能各有优缺，如果是少量动画文件，既不会负载cpu，内存和渲染又比较好，pag性能还是比较好的。可以多往实用场景、功能性、跨平台、可维护性考虑。
• PAG提供了一套简化并完善的动画工作流，在缩小体积的情况，仍然支持所有AE特性，并保留了动画运行可编辑灵活性。仅需接入一次，设计师可快速上手使用高效组件，不再因研发成本消弱呈现效果。

相关链接

官网

https://pag.art/

源码地址

https://github.com/Tencent/libpag/tree/main/android

资料

https://cloud.tencent.com/developer/article/2023747