PAG能成为SVGA的完美替代吗？

广州/艺术工作者/4年前/7058浏览

版权

PAG能成为SVGA的完美替代吗？

腾讯PCG发布器中台自研动效落地插件PAG，和市面上常用的插件SVGA的工作流对比

Hi！大家好，这里是VAYAN。我们在各种直播或者短视频平台上边经常会有用户刷礼物啊，那么那些效果呢都有好多种格式输出的，比如有序列帧、GIF、APng、Webp、Lottie、Svga、PAG和mp4等，每种格式呢，都各有优缺点。今天在这里着重给大家分享一下腾讯PCG发布器中台自研动效落地插件PAG和市面上常用的插件SVGA的工作流对比。废话不多说，这就开始吧~

【动画工作流介绍】

SVGA和PAG都是通过AE设计动画，然后导出成动画文件，在平台端通过各自的渲染SDK加载渲染，流程上大同小异。但PAG支持的平台更多，增加支持了mac OS、windows和web端；PAG的配套工具也更加完善，如AE导出面板支持查看不支持的的AE矢量特性，桌面端预览工具支持在PC端预览效果和查看性能数据。

（SVGA方案流程图）

（PAG方案流程图）

【背景基本介绍】

那么讲到SVGA和PAG的区别，就不得不先给大家介绍一下两者的背景了，我整理了以下表格，方便大家对照理解~

（SVGA和PAG的基本对比）

【动画制作和落地限制】

这是动画师们最关心的环节之一，有时候我们想要实现某些视觉效果，但是到落地被告知无法实现，被迫砍掉或者更换效果，这对于动画设计师来说的确是很头痛的问题。所以在确认输出格式的时候，也要明确每种格式的限制以及各自对性能的影响，以此来反推动画过程中制作的限制，以求以最优的性能和最优的效果达成最优的落地。

结合两者格式的基本特性，那么在这里我大致列举一下SVGA和PAG能支持的效果的对比。

（SVGA和PAG的支持维度对比）

整体而言，SVGA对比PAG还是存在不少限制的，在动画制作过程当中需要小心，不能使用不支持导出的效果。关于这一点，估计很多刚入坑SVGA的小伙伴们经常会踩各种坑，属实惨不忍睹。

SVGA本质是png图像的基础动画属性的打包文件，基本不支持AE自带的fx效果，如果非要使用，需要转化成序列帧再导入AE进行抽帧优化，过程较为繁琐。

而关于PAG输出格式，我整理了下方的表格供小伙伴们理解。

（PAG输出格式说明）

那么在平时的工作流当中，就看各位小伙伴们的设计需求啦~一般的UI可能用矢量预合成的情况会多一些，那如果是一些比较华丽的效果，比如礼物动效等，就会用到BMP预合成或者混合预合成，而这仅仅只需要预合成命名一个后缀就可以完成输出，不会有像SVGA要先渲染序列帧然后来回倒腾的烦恼了~

接下来我用一个我工作中的动效作例子，列举SVGA和PAG在输出的时候，性能体验优劣对比。为了对比的公平性呢，这里不使用AE自带的fx效果，仅仅是图像的基础图层属性动画配合的效果。而动画制作的本身已经是尽可能最优优化素材，保证了资源的复用率，全部动画都是手动k帧动画达成的效果。

（用于对比的动效GIF预览效果）

（SVGA和PAG的输出体验对比）

综上导出体验而言，在工作流当中，PAG在制作一些AE自带fx或者是第三方的特效的时候，便捷程度上都会优于SVGA，对于序列帧的处理，个人感觉PAG的BMP预合成输出对比于SVGA的序列帧处理，时间上将可以节省30%以上的时间。在输出性能方面，同样的文件，PAG输出的速度比SVGA也要快上不少。文件体积和内存占用方面，PAG使用的技术同样优于SVGA，这可以极大的节约文件包的空间并加快用户的读取速度。

各位小伙伴们可以根据自己的项目需求来使用不同的动画格式，如果条件允许的话，个人是比较推荐PAG格式，支持维度多，不需要过多的繁琐辗转于各种图片压缩工具，输出可视化等都能为设计工作者提供便利。相信在未来，PAG格式在性能和优化以及支持的维度将会越来越优秀！并且1月14号，PAG将会正式对外开源，目前也可以下载使用了！

如果还有想更进一步了解PAG，或体验PAG的小伙伴，可以到PAG的官网（https://pag.io/）以及加入官方QQ群进行交流讨论哦！