新发现！应用类动效的还原神器：PAG
一个国产动效还原神器PAG的试用体验
新发现！应用类动效的还原神器：PAG
作为游戏界面动效设计师，我最近与公司里的应用类设计师进行交流时，发现应用类界面动效的还原工序非常便捷高效，与游戏界面动效的繁琐重构过程有很大的不同。
于是花时间研究了一下应用类产品的动效落地。本文就简单的看下常用方式如Lottie和SVGA等这类常用工具的实现逻辑，并重点简单介绍一下新发现的神器“PAG”。
游戏类的动效合入完全依赖游戏引擎。基本原理是将设计稿进行切图后在引擎内“重构”，也就是将切图在游戏引擎内的专用工具进行拼合，再利用引擎提供的工具，如unity中的animation、tween等工具，进行动画制作。由于游戏的特殊性，界面动效上还会涉及很多复杂效果甚至是特效，这些效果都要依赖引擎中的材质去实现，偶尔也会利用到序列帧。但本质上游戏界面相关的实现，都要考虑“经济性”，如利用尽量小的切片，用尽量少损耗的材质等。总体上游戏界面动效设计师在引擎内还原动效时，所做的工作可以认为只是换了一个K帧工具（比如设计动画用AE，而还原动画用unity，两者在制作动画上没有本质不同）去K动画。
下图：UE4中的时间轴面板，动效设计师在这里K帧：
下图：Unity中的Animation面板，动效设计师在这里K帧：
经过一段时间的研究，我发现应用类的动效实现与游戏类是完全不同的。它们不具备游戏引擎的开发环境，基本上基于代码与少量切图进行落地实现。
相比游戏界面动效来说，应用类的动效设计师在“动效预演”与“落地还原”之间的鸿沟更不那么明显。即几乎可以直接利用AE的设计将整体效果导入到产品版本中去。
不过应用类与游戏类的动效还原在基本思路上还是高度一致的，那就是两者都基于“经济性”层面的考虑去做还原。都会倾向于利用尽量小、尽量少的切图量去还原尽量好的效果。
同时，由于设计端在设计工具上的进化，如普遍使用Sketch或Figma这类矢量的、在线的、可多人协作的工具，配合相应的工作流解决方案，可以使应用类动效的实现，在一些情况下做到零切图的程度，这一点可以说非常惊人。
通常我们在应用类界面的动效还原上主要会用到AirBnb开发的Lottie，这个工作流的优势是可以同时支持Sketch和Figma导入设计稿到AE中，进行设计后再导出为Jason文件，进而提供给前端进行进一步还原处理。
这其中的要点分成多种情况，站酷上有多篇文章深入的分析过，这里就简单的列举下。
像纯矢量的图形，色块，或者渐变的简单属性变化，如位置、大小、旋转甚至是色彩变化（色彩需要额外的代码处理）这类的动画，都可以直接输出成单独的Jason提供给前端。如遇比较复杂的效果，如阴影、位图类（诸如细节颇多的发光效果等）就需要额外生成一个带有图源包的包体提供给前端。
目前主要有Lottie和SVGA等几种工作流解决方案。它们各有优劣。比如Lottie所支持和不支持的，在不同平台上的效果，都不能算作很全面。这方面的材料都很多，而且大部分应用类的动效设计师对此已经非常熟悉，此处不再赘述。
下图是官方列举出的特性支持与否列表的一部分，具体操作中需要设计师自己去取巧避坑：
除此之外，还有一种叫PAG的动效解决方案，它让我有一种大为不同的感觉。
实际上，PAG与前两者工作流大部分相似，设计师转换起来成本还是比较低的。
它包含三部分内容：导出插件、桌面预览工具和渲染SDK。但是它拥有的一些独特的特性，如生成的pag文件相比APNG、GIF、WebP，要小得多（经过测试，同一效果使用PAG导出的pag文件要比lottie中导出的json文件和SVGA中导出的svga文件体积要小得多，具体见下文）、对AE中设计效果的支持更加全面（通过BMP全AE特性支持）、运行pag文件可以编辑替换文本与展位图片、甚至还有专有的桌面工具（对应lottie和SVGA都没有类似的便捷预览方式，且无法在预览中修改替换）等等，使人眼前一亮。
下文我拿TapTap已上线设计稿中的一个图标效果来做了一个实验，为大家展示下PAG的特性。
首先在Figma制作的设计稿中利用AEUX插件将特定的图标导出到AE中：
而后在AE中调整需要的动画，下图为动画效果：
下图为动画图层：
动画制作完成后，选定要导出的合成，此处为图标动画本身的合成，将其导出成PAG文件（这个导出的功能需要按照官方指引安装上去，非常简单，具体方法可查询文末提供的官方链接）：
导出完成后，PAG预览器会自动打开：
与此同时，PAG文件会生成在你选定的路径下：
这个文件极小，只有2.28K：
插播一句，利用lottie的Bodymovin导出同一效果的json文件体积为14.3K：
而使用svga方法导出的同一效果svga文件体积为3.64K：
pag文件以2.28K的大小占据了绝对优势！
插播结束。
在预览窗口中，可以看到该动画的相关性能数值：
可以看到，我们这个示例里并没有可编辑的图层，那是因为这个动画中没有额外的嵌套图片与文字，如果加上这两个，就可以预览和编辑图层了。
比如说我们以这个案例中的橙色飞机合成做实验，我们将其单独转换为合成后，加入一张图片和一行文字，然后导出PAG，就可以看到这样的预览窗口：
此时，图层编辑中出现了这两层的编辑显示，我们可以对文字和图片进行替换：
另外，PAG拥有强大的BMP全AE特性支持，即当动效设计稿中涉及较多位图而非矢量设计时，PAG可以支持全效果导出，目前不支持的AE特性比较少，如表达式和少量内置效果。
因此我又尝试了一个全为位图切片构成的动效导出过程。
设计效果如下：
AE中的图层如下：
在该效果中只用了位图切片，遮罩效果。其中的晃动原先使用滑块与wiggle表达式，流光用slide wipe效果，但这两个效果目前尚不支持，因此手动改为关键帧模式。
作如下设置之后导出（官方建议“存储格式”用“视频序列帧”时更节省体积和性能）：
导出为pag格式后，PAG的预览器还是自动打开：
此时可以看到右侧的“图层编辑”中可以看到所有用到的位图，可以在这里直接进行替换操作，非常方便。
而生成的pag文件也只有39.5K：
但同规格情况下的gif文件则有2.97M之多：
如果用lottie导出，则会生成一个切图文件夹和一个json文件，虽然总体体积较小，但预览相对不便，也没有pag的修改替换便捷度。
而SVGA则在预览阶段就显示出对遮罩效果的不支持：
总体上看，PAG的BMP全AE特性支持已经做到非常便捷的程度：
较小的文件体积；
单一预览文件；
可全效果预览和便捷的修改成本；
显示性能损耗，便于设计侧提前预警；
对AE效果的几乎全性能支持，设计侧需要担心的效果实现问题的较少。
这些功能都最大化降低了动效设计稿的还原成本。
如果比较担心哪些效果不能被导出的话，在官方的文档中，有对AE的性能支持的详细信息：
上图只是其中一小部分，另外还有对内置特效支持的列表，更多信息可点击该链接查看：https://pag.io/docs/ae-support.html 最后你会发现基本上常用的AE效果都是被支持的。
这些是动效设计工作前期的制作和导出的基本办法，可以看出PAG是非常方便对动效的设计进行导出的，后期我们提供给前端时，需要他们去做一些接入SDK的准备工作，这些也可以参考官方的文档：：https://pag.io/docs/sdk.html
另外，如果你用的是lottie工作流，官方亦提供了迁移指南：https://pag.io/docs/lottie-migration.html
相比其他动效解决方案，PAG的整个工作流程显然要方便和快捷很多，省去非常多设计调试与代码方面的工作，而且对AE中的效果有着更广泛的支持力度，对动效设计师和前端来说都可以省去大量的精力和时间非常推荐大家去尝试。
而且如果你对版本较为敏感，就目前来说PAG还支持AE最新版本CC2022，比如下图所示的SVGA就尚不支持最新版本AE。
结尾之前，奉上官方传送门：https://pag.io/
按照官方的文档、指引，就可以非常简单快速的上手这套工作流工具，但是如果仍有疑惑，还可以找官方交流群：
最后口出狂言一下：很期待官方能出一套与应用类界面类似的游戏界面的对应解决方案，让我们可以投入更多精力在设计本身上。
