干货！腾讯研发国内动效落地神器-PAG
一款更好用的动效落地神器
Lottie的出现让设计师告别繁琐的动画标注，开发也不再为动画的完美还原来回修改（折腾设计师），不过今天在这里，我给大家介绍的是一款腾讯研发的开源动画渲染库——PAG。
相比Lottie，PAG的视觉效果和文件体积有绝对优势：
1.可以支持AE全部特效，所以设计师只需要关注视觉效果本身即可
2.文件体积很小
接下来我们从以下3个方面来了解一下PAG：
1.PAG是什么以及如何安装
2.如何导出PAG文件
3.如何压缩PAG文件体积
1.PAG是什么以及如何安装
官方定义：Portable Animated Graphics 是一套完整的动画工作流。提供从AE导出插件，到桌面预览工具PAGView，再到各端的跨平台渲染 SDK。换言之，我们通过AE安装PAG插件，然后导出pag文件给到开发，开发接入SDK，便可以解析动画，并实现在各个平台的渲染还原。
目前PAG支持mac（macOS 10.9以上）和windows操作系统，安装和使用都很简单，以mac系统为例，首先需要安装PAGViewer，选择图形化安装即可；然后打开 PAGViewer，PAGViewer 将自动检测是否需要安装/更新 AE 导出插件，按提示安装即可。附链接：
2. 如何导出PAG文件？
PAG同时支持「矢量预合成」直接导出和「BMP预合成」导出两种方式。设计师在指定的预合成名字上加 _bmp 后可以将该预合成标记为「BMP预合成」，没有后缀的预合成为「矢量预合成」。
A.「矢量预合成」
「矢量预合成」导出的方式文件极小，并性能会优于BMP预合成，但仅支持部分AE特性。更多特效正在开发中。矢量预合成导出通常用于UI动画等对于文件大小和性能敏感，以及需要贴纸内容可编辑的场合。
导出步骤：
第一步，“首选项” -> “PAG Config...” -> “通用”-> “导出场景”更改为“UI动画”。其余设置保持默认即可，如果“序列帧”之前更改过设置，点击“重置默认值”即可。
第二步，点击选中需要导出的合成(Composition)，然后点击菜单“文件” -> “导出” -> “PAG File...”，选择要保存的路径即可导出。
B.「BMP预合成」
BMP预合成」在导出时会自动进行截图方式导出，因此可以支持所有的AE特性，但是文件体积较大，也无法运行时编辑内容。BMP预合成通常用于无法矢量导出的场景，例如用了粒子效果或者第三方插件等。
导出步骤：
第一步，“首选项” -> “PAG Config...” -> “通用”-> “导出场景”更改为“通用”。“序列帧” -> “BMP预合成后缀”去掉“_bmp”或者保持默认“_bmp”, 建议去掉，如果保持默认“_bmp”，还需要对预合成重命名添加_bmp。
“帧率”按照文件设置的来写。
第二步，点击选中需要导出的合成(Composition)，然后点击菜单“文件” -> “导出” -> “PAG File...”，选择要保存的路径即可导出。
“存储格式”包括位图和视频序列帧，位图存储格式做了简单的帧间压缩，每帧只记录改变的区域。平均可以比传统的PNG序列帧文件小 50% 。而视频存储格式帧基于 H264 帧间压缩并补充了透明通道，相同动画文件大小非常有优势。相比位图存储格式只有 10 % ~ 25% 左右的文件大小。下表是一些常用的动画效果在两种导出模式下的文件大小对比：
视频存储格式是BMP预合成的默认导出格式，除了文件大小的优势，渲染时还可以开启硬件加速解码，能显著降低设备发热量。
C.「矢量预合成」&「BMP预合成」
两者也可以混合导出，BMP预合成可以被矢量预合成嵌套，作为它的一个图层来实现AE特效和可编辑的结合。
导出步骤与BMP预合成一样。
3.如何如何压缩PAG文件体积
文件体积的优化有多重环节来保证。除了在导出过程中程序会自动化的体积优化外，设计师还可以手动操作达到更深度的优化压缩，进一步减小导出PAG文件体积。
第一，启用此功能需在“首选项->PAG Config...->单独调节图像尺寸”中选择开启（默认关闭)并点击确认。
第二，如果导出的素材中包含图片或BMP预合成，AE导出插件将在导出过程中弹出“素材压缩面板“，以供设计师在素材效果与素材体积之间做出最优选择。 
总结：
PAG的安装和各种操作都很简单，矢量预合成的导出虽然文件极小，lz亲测同一个文件Lottie导出13k，PAG导出457字节，但是因为只能支持AE自带的动效，在UI动画上还不是很完善；BMP预合成则能很好的支持各种效果，这简直是设计师的福音，让设计师专注动画本身即可，不用担心实现问题；最后，设计师和开发小哥哥们可以妥妥的用起来了！
