Lottie和SVGA之外的另一种选择：我为什么把SVGA换成了PAG

案例背景：为什么选择PAG

移动端的动画制作，在设计师和研发群体里一直是个很大的痛点，行业里也一直没有特别完善的解决方案。近些年直播动效动画SVGA格式的风行，前端动效落地的成本比以前低了许多，不论是动画视觉效果、前端事件绑定、动效文件大小控制等等方面，SVGA让设计师在动效上的发挥空间得到了进一步的扩展。但是SVGA基于AE图像基本属性的限制，后期二次修改以及作为模板的使用机制，还存在很多的不便。目前SVGA以及Lottie对于AE支持有限、动画性能难以保证。在配套工具层面，虽然在一定程度上提升了生产效率，但在配套工具上对设计师的支持有限。所以为了更加简单快捷方便的协助设计师动效展示的落地，本次我将使用腾讯所推出的PAG格式作为新版礼物制作案例，来帮助大家了解PAG，以及其“文件更小，性能渲染更快，后期修改更方便”等特性。闲话少叙，先看成品。

一.礼物制作导出流程

单单看这个礼物动效，我们会觉得这个案例层级很复杂，每一个元素要作为单独的模块进行运动变化。但对于AE内的制作来说分别指定统一的运动规范，将它们按一定节奏规律组合搭建在一起，我们的PAG格式导出后，只对整体的动画参数来进行描述更改即可。

SVGA兼顾AE属性动画和帧动画，但是AE其余属性的动画都要转换为帧动画完成。

至此，PAG的第一大优势开始展现——关键帧动画属性支持。

这些属性都是SVGA之前无法之前导出的属性。

二.转投PAG的原因——AE多属性支持

以海王礼物动效为例：我们在Lottie和svga直接导出上遭遇碰壁，原因是因为Lottie和svga动画不支持部分AE直接导出的一些叠加效果，AE自带的效果预设，以及AE轨道Alpha遮罩，导致我们必须考虑以PAG的方式去实现动画。

为了给用户带来更丰富的海水迸溅层次氛围，前期我构思的动效是：希望尽量带有冲击感。拟3D的效果可以让海水的出现看上去更加真实，并且在海水飞出的过程中，使用了ae叠加属性效果。

同样，这种叠加属性也应用在了出现的光效之中，这两种不同的叠加属性都是在之前Lottie和svga的格式中无法直接导出的。

前期我们为了让全屏礼物适配多种机型，要基于礼物大小做上下边缘的羽化效果，我们希望尽量通过PAG所支持的AE属性来实现这一需求，这样在文件大小、性能上都能够更好把控。

所以这里PAG相较与Lottie和svga格式的又一突出属性发挥了作用，这就是AE轨道Alpha 遮罩的属性支持，如图展示

最后是pag最厉害的一点属性支持，就是竟然支持AE原生的效果预设，比如为了突出海王出现的镜头感，我加入了运动模糊属性在海王出现的一瞬间 ，这个效果如果之前在Lottie和svga格式实现，必须先将效果做好后导出为序列帧，再导回到文件中使用，这种为了实现一种简单的效果而复杂的操作方式，确实使得设计师效率很低，但是在PAG格式面前却因为它支持ae的模糊属性，使得我可以直接导出做好的效果。

其实说到这里，大家也该感受到了，想方便快捷、随心所欲的设计导出我们的成果，需要格式最大限度的支持设计软件的属性功能，而设计上的效率提升，也往往在更好用的导出方式中得以实现。

三.PAG导出体验

 

熟悉Lottie的朋友应该知道，当动效中包含位图元素时， Lottie会生成两个文件：一个json代码文件+一个img文件夹，这也是为什么我之前用Lottie去做序列帧时，整个文件包的大小达到了几兆之多的原因，大部分都是因为一张一张的图片堆积起来的。

而通过PAG，只会生成一个.pag后缀文件，代码和位图元素都被集成在了一起。PAG导出的流程和速度相较其他格式也更方便快捷。

四.可预览神器——PAGviewer

 

PAG格式拥有桌面预览工具PAGViewer，主要有两个功能：效果预览和性能检测。

除了效果预览，PAGViewer还展示了该动画文件中包含多少个可编辑文本和可编辑图片图层，并且支持在预览工具中修改展现效果，支持设计师在在本地填充素材预览，而无需等到上线后才能确认真实的效果。由于在视频编辑的场景下，PAG动画的占位图常用来填充视频，同样支持将占位图填充视频预览效果。

除了画面渲染，由于PAG文件是二进制文件，我们同样支持在PAG文件中添加音效，在PAGView中同样支持音频效果的播放。

对于一些需要占位图需要设置替换图片、替换视频的场景，PAG同样增加了可视化的选项供设计师使用，这个才是亮点!!!

修改再也不用打开AE，动画元素一键替换才是yyds！

以上所有方法都要视具体动画，具体分析，筛选最为合理的优化方式。当然你还可以探索其他各种方式来进行PAG格式制作流程的优化，并且1月14号PAG即将对外开源，现在已经可以下载使用了，还想深入了解的朋友们可以到官网