PAG：更完美的动效输出解决方案
一款新的UI动效工作流解决方案
众所周知，动效给我们的互联网产品体验带来很多好处，设计师朋友们对此也乐此不疲愿意在自己的设计中去加入动效。优秀的动效设计能让用户从中理解UI的层级附属关系、能让用户感到惊喜和产品的温度等等。但是动效在设计师手里从设计到最后的落地，特别是落地阶段，一直以来都是工作量和难度最大的部分。
动效的落地在最近几年诞生了很多种方式，更新迭代也很快。从最初的雪花图、GIF等，到现在我们能输出更高质量的方式，APNG或者用插件导出JS代码的形式，都在很大程度改善了从动效demo阶段到落地实际能给用户用到的交付过程难度，虽然输出的方式在变多，但是输出的结果还是差强人意，都存在各种各样的限制和缺陷。设计师在面对这么多不同的动效落地方式的时候也犯了难，除了要去深入理解各种方式的优劣之外，再采用一种新的方式的时候也需要再投入学习成本，加重了工作负担。
在设计师需要面对这些复杂的落地问题的时候，腾讯出了一个全新的更优解的动效落地方案——PAG，跟当前市面上的“SVGA/Lottie”是同类型的动画工作流解决方案，但是其在便利性、设计研发成本、可支持的动效形式和落地的还原度效果等方面有更优秀的表现，其包含导出插件、桌面预览工具和渲染SDK等三部分内容。
SVGA和Lottie可以说是近两年在动效输出方面不得不提的两种方式，它们在各种动效落地使用场景中都会被使用到，但是它们各自本身存在一定的缺陷，当我们在采用单独一种方式的时候总是存在这样或那样的各种问题，为了解决这些问题，我们往往都需要深入去理解其不同的特性，当一种不能满足的时候采用另外一种，起到备用互补作用。例如：Lottie本来对缓动曲线的解析能力比较差因此会带来性能和稳定性问题，这时候我们会采用SVGA的形式，其会更稳定点，但是它占用的内存又会比Lottie高，支持性也相对更少，总之有利有弊没有两全其美。
而PAG能完美的解决这两者无法解决的问题，把他们的特性和优点都囊括，以下通过一个图表的形式来横向对比各种的优劣： 
使用体验分享：
实例效果如下方视频所示，它是一个勋章的入场及呼吸动效，它跟普通的UI动效相比多了很多AE效果、叠加模式和特效粒子等等，通过现有的方式想要完整输出完美的美术效果落地实际上是难度比较大的，但是通过PAG却能很好的解决我面对的问题。
1、第一步
我在AE中完成动特效的设计并整理好单独的合成，命名为“勋章动效”。
2、第二步
导出设置，要导出PAG文件我们需要找到：“文件/导出/PAG File(Panel)…"。由于这个动效属性较为复杂，因此在”导出PAG“的窗口中点击”设置“图标进行设置，选择了BMP预合成的导出方式，因为它能够支持几乎所有的AE特效，虽然不支持后期编辑，但对于我这种游戏行业工作者来说，后期编辑的需求并不是很大。
3、第三步
设置完成之后，点击”导出“即可完成”PAG“文件的导出，我们将得到一个文件名为”勋章动效_bmp.pag“的文件，将改文件拉进客户端里预览后，我们将惊奇地发现，还原度几乎就是100%，可以设置隐藏或显示背景色，也可以展开编辑面板，在导出功能中也可以选择导出PNG序列或者APNG文件，当然最最直接的方式就是直接用这个PAG文件交付开发调用，实现无损耗的动态效果。
安装及设置分享：
1、客户端和导出插件安装（windows系统为例）
先在官网https://pag.io/ 下载客户端按步骤点击下一步安装即可，安装完后，点击客户端的菜单栏目：“PAGViewer/文件/安装AE插件”即可完成客户端和AE插件的安装，要注意的是安装插件的时候需要关闭AE软件。
2、配置面板
配置面板设置选项，是用来设置一些通用的导出参数，对于一些通用的、不常更改的一些导出选项，会在插件配置面板进行配置。它在AE中的位置是“窗口/拓展/Pag Config”
到这里，就可以愉快地使用啦，更多内容也可以去官网学习浏览…
腾讯系的诸多产品，例如：微信、QQ、王者荣耀等知名APP及游戏都采用了PAG技术，它的优越性和简化完善动效工作流的能力是有目共睹的，在缩小文件体积的同时仍能最大程度的保留AE的特性，并保留了后期的二次修改能力，让你无需再次打开繁重的AE，让设计师朋友们的精美动效输出真正做到所见即所得。
目前动效的输出手段虽然多种多样，但是目前来说并没有一种方案可以完美解决所有动效落地过程中遇到的问题，这也是当前设计师朋友面临的动效输出的最大痛点。但是PAG这样一个解决方案的出现，我相信它能真正解决这样的一个痛点，让设计师朋友能专注于自身的灵感表达而不再陷入方案落地困难的泥潭中。
