用了这个动画神器PAG，老板都要给我加工资了！

爱设计的狐狸

深圳/UI设计师/3年前/6629浏览

版权

爱设计的狐狸

最近我发现了一款动画神器，能有效解决设计师和开发在实现动效过程中的壁垒，让动画效果1:1还原，不妨一起看看吧

作为UI设计师，我们或许都遇到这种情况，自己想了很酷炫的动画效果，演示给技术看，技术很多时候是一脸拒绝的，你得到的回复往往是：

这个实现不了，这个难度太大，这个太复杂了，平台支持不了，这个太耗性能了，app跑不起来，这个看着效果很好，太耗时了...

熬了几个大夜，反复修改了好几次，才最终确认的动画，居然还是实现不了，你内心是不是非常崩溃？做出来的产品也没那么有创意。我询问了一下开发工程师的想法，他也是反馈说工期太紧，做出来要自己调用各种原生动画库，写起来很复杂，很多参数之间有关联，写完后还要一个个调，做出来往往设计还不满意，很费劲。

他跟我说，如果有开源插件能导出文件直接调用，那他们就不需要自己费劲脑汁还原动画效果，这样能很大节省开发成本以及和设计的沟通成本，而且效果是100%还原的。

做为UI设计师，我也非常想要找到一种方式，能让app最终实现的动画效果和我设计出来的动画Demo基本是1:1还原的。

通常我都是用PS、Principle、AE做动画，但有时对到底要交付给开发工程师哪些文件会有疑惑，直接把动画文件给他，他打不开，要跟他不断沟通解释，还要花不少时间切图，很费时间。

最近我发现了一款这样的动画插件，刚好能解决设计师和开发工程师在实现动效过程中遇到的这些难点，它能直接输出开发可以解析的文件，开发只需要直接调用，无需再花时间去想怎么实现，这款插件就是PAG。

PAG是Portable Animated Graphics的简称，它是腾讯自主研发的一套完整的动画工作流解决方案，提供从AE（Adobe After Effects）导出插件，到桌面预览工具，再到各端的跨平台渲染 SDK（SDK是指软件开发工具包，Software Development Kit的简称，SDK被开发出来就是为了减少程序员工作量的），并且即将在14号对外开源，目前已经可以下载并使用了。

那么，PAG有哪些特性和优势呢？

1、解码速度快，生成文件小

PAG同时支持「矢量预合成」和「BMP预合成」两种导出方式，可集成包含图片等任意设计资源的单文件，实现快速交付。导出同样的 AE 动画内容，在文件解码速度和压缩率上，PAG比 Lottie 所用的 JSON 文本数据要快很多。

在文件大小上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，相同动画内容可以比同类型方案平均减少50%左右的文件大小。

而在性能方面，PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。

此外，我们可以在PAG里把文件里所有关键帧通过3种方式导出：导出为PNG序列帧、导出APNG或保存当前帧为PNG。

以“导出为PNG序列帧”为例，导出后，就会把动画里的所有帧画面切图保存在一个文件夹里，这样可以快速提取关键帧切图，如下图所示。

导出APNG，就只有一个***_APNG.png的文件，打开后是可以播放动画的：

2、动画文件具有可以编辑性

我们知道，Lottie动画的制作流程是：设计师通过AE 制作动画，然后通过Bodymovin插件导出对应的JSON文件，给到每个端的研发，然后进行编译展示。

而PAG的工作流程是：设计师通过AE 制作动画，然后用PAG插件导出对应的PAG SDK，在研发成本上，只需要接入 PAG 的 SDK 即可。

我们可以用PAG打开一个从AE中通过矢量预合成导出的***.pag文件，可以看到右侧有图层编辑面板：

点击“编辑”按钮，可以对文案等进行编辑：

3、全AE特性支持

在设计动画的过程中，部分AE特性渲染耗时是比较高，如AE特效、轨道遮罩等，而Lottie也同样存在这个问题，很难做到实时渲染，支持的也主要是一些常用的AE特性，设计师的发挥空间受限。而PAG增加支持了“BMP预合成”的导出方式，支持导出更多AE特性，适用于不可编辑的场景。

在指定的预合成名字上加 _bmp 后，就可以将该预合成标记为「BMP预合成」，没有后缀的预合则成为「矢量预合成」。

「BMP预合成」在导出时会自动进行截图方式导出，因此可以支持所有AE特性。如何对动画进行「BMP预合成」呢？可以在AE进行这样操作：点击“文件”-“导出”-“PAG File...”时，那么PAG文件就会自动加上_bmp的后缀。

同时，通过点击AE的“编辑”-"首选项"-"PAG Config..." ，还可以对「BMP预合成」导出的相关参数进行设置。

这是用PAG插件打开_bmp后缀的文件，会发现右边的面板显示“没有可编辑的图层”，说明进行了BMP预合成的文件是没法编辑的。

可以在AE中通过“文件”-“导出”-“PAG File (Panel)...”-“设置按钮”操作：

勾选BMP时，会出现确认弹窗，因为一旦转为BMP后，占位图和文字就不能再在PAG里进行编辑了。

其基本原理是将AE特效渲染成图片序列帧，进而导出成视频，以很高的帧间压缩率实现了那些不能支持的特效，还扩展了对视频透明通道的支持。

「矢量预合成」导出的文件极小，且性能会优于BMP预合成，但仅支持部分AE特性。推荐尽可能使用矢量预合成导出，可以获得更好的性能和更小的动画文件。

4、性能检测可视化

PAGViewer上的Profiler性能检测面板可以很直观地帮助设计师进行性能调优。预览时按下键盘上的P键即可呼出该面板，再次按下则关闭面板：

面板上各种信息的含义：

FrameRate : 播放帧率，每秒刷新画面的次数。

Duration : 动画时长，单位为 s(秒)、m(分钟)、h(小时) 。

Graphics : 贴纸播放时占用的显存大小，单位同上。

Videos : 贴纸内采用视频格式的「BMP预合成」的数量。

TagLevel : 贴纸内包含的最高的Tag等级。

Width : 贴纸设计宽度。

Height : 贴纸设计高度。

Layers : 贴纸内包含的图层总数量。

Render : 当前一帧的渲染耗时，单位微秒。

Render(AVG) : 当前面板图像内的平均渲染耗时，单位微秒。

Render(MAX) : 当前面板图像内的最大渲染耗时，单位微秒。

Image : 当前一帧的解码耗时，单位微秒。

Image(AVG) : 当前面板图像内的平均解码耗时，单位微秒。

Image(MAX) : 当前面板图像内的最大解码耗时，单位微秒。

Prensent : 当前一帧的上屏耗时，单位微秒。

Prensent(AVG) : 当前面板图像内的上屏耗时，单位微秒。

Prensent(MAX) : 当前面板图像内的上屏耗时，单位微秒。

对于需要进行优化的部分会有红色警告标志，并且提供相关的优化建议：

此外，在AE中导出PAG FILE...时，对于需要优化的部分，也会弹窗提示，给出贴心的优化建议。

已经投入使用PAG的产品

PAG这款插件还是值得在APP的动画设计过程中用起来，它可以更大程度地还原你的动画设计效果，优化app动画性能，同时减少时间成本。

目前像微信、QQ、QQ音乐、全民K歌等app已经都用了起来，设计师们可以和工作对接的开发工程师一起交流讨论下，将这款实用的动画插件运用到具体的项目开发过程中。

最后的叨叨念

能不能带来团队项目效率提升，能不能推动设计效果落地，也是拉开你和其他人差距的能力。无论领导层还是最终面向用户，体验的基本是最终上线的效果。

通常他们并不关心你在具体设计过程中花了多少心思，修改了多少版本，也并不是你想了一个特别有创意的动画设计方案大家初步确认OK，就没你什么事了，然后最终做不出来也可以认为不是你的问题，这样最终也难以做出更加打动人心的产品，同时个人设计热情也会受打击。

通过工具或者协调上下游人员去实现设计效果，最开始尝试是会觉得麻烦琐碎，但是做过熟悉之后，你也许会发现在以后的各个项目里，都可以省不少心，同时还能有更好的落地效果。面对新的工具或者说新的方法，只有试过之后，你才真正感受到它是否能成为更适合的解决方案，不是吗？

今天的分享就到这里，对于PAG有更多兴趣的小伙伴，请登录PAG的官方网站（https://pag.io/）或扫码进入官方QQ群，如果你发现了更好的动画落地神器或者遇到动画实现过程中其他难以解决的问题，欢迎评论分享哦！

-----------------------------------------------------------------------------------

附录——PAG如何上手操作？

说了这么多，大家一定想知道，具体要如何上手操作这款插件。

首先，我们可以在官网上下载，官网地址是：https://pag.io

下载PAGViewer_Installer.exe（windows版）或PAGViewer.dmg（MacOS版）在本地安装后，会在电脑桌面上看到PAGViewer图标，启动 PAGViewer 后，可以通过“文件”-“打开 ”菜单，或者拖动一个 pag 文件到窗口中开始预览。打开 pag 文件后会自动开始播放，可以使用底部栏的按钮来控制播放状态。