今天给大家推荐一款未来很有可能会成为主流的动画解决方案 —— PAG。
1. Lottie
它算是市面上比较普遍的一种动效落地方式，它可以制作很多种类的矢量动画以及图片动画，它的缓动曲线会占用很多内存，在各平台效果支持上也不是特别的稳定，而且 Lottie 所支持的 AE 属性对设计师来说有一定的限制。
大家好，我是彩云。
阅读文章 >2. SVGA
与 Lottie 相比性能和稳定性会更好一些，因为 SVGA 是通过记录我们每个图层每个时间上的动画状态，因此 SVGA 也可以输出序列帧动画，但是它的内存消耗会比 Lottie 高，并且 SVGA 支持的 AE 特性也比 Lottie 少一些。
3. Apng 和 Webp
这两种动效落地方案目前在原生端可以通过一些代码框架支持，在 Web 端 Apng 和 Webp 格式存在一定的兼容性问题，目前在主流浏览器上是可以支持的。
1. PAG 是什么
PAG（Portable Animated Graphics）是腾讯自主研发的一套完整的动画工作流解决方案，助力于将 AE 动画方便快捷的应用于各平台终端。
设计师在 AE 上设计出动画后，可以通过导出插件导出 Pag 文件，同时可以在桌面端预览工具中实时预览效果，还可以通过桌面端进行性能检测。PAG 可以支持 Android、iOS、web、mac OS、Windows 和 Linux，涵盖了业界常用的终端平台，支持 AE 动画实时渲染、运行时编辑。
Lottie 和 SVGA 的设计目标是解决 UI 动画场景，PAG 的诞生的原因是因为 Lottie 无法满足视频编辑场景里的动画需求，后续又兼顾了 UI 动画在内的各种场景。
2. 完善的动画工作流
通常设计师输出动效给开发都是直接 AE 导出就给开发了，很少去关注动效的性能问题，并且每次想要尝试不同素材动画效果时，需要在 AE 中调试输出后在去看效果，导致设计成本浪费。
采用 PAG 进行动效设计的话，我们在 AE 中调试好输出动效后，可以直接在 PAG 桌面端进行查看，在桌面端我们可以快速替换动效中的图片素材或文案来查看效果，同时可以通过性能面板查看当前动效的性能，方便设计师进行针对性优化。
3. 性能强文件小
PAG 采用了二进制的数据结构来存储动画信息。二进制数据结构能够非常方便的单文件集成任何资源，在解码速度上比 Lottie 所使用的 JSON 文本数据快几十倍，在性能方面，PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。
而在文件大小上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，相同动画内容可以比同类型方案平均减少 50% 左右的文件大小。
4. AE 特性全支持
PAG 动画制作有两种模式，分别为“矢量特性输出”和“BMP 预合成输出”，先来说下“矢量特性输出”：
我们可以理解为用矢量素材和图片素材通过 AE 特性进行动效制作，PAG 的 AE 特性的支持是多于 Lottie 和 SVGA 的，且基本上涵盖了所有的 AE 特性，矢量特性输出性能会比 BMP 预合成输出性能更好。
再说下“BMP 预合成输出”：
我们可以理解为序列帧动画输出，也就意味着通过 BMP 方式输出我们可以使用 AE 中所有的特性，甚至是 AE 插件效果和视频素材，虽然“ BMP 预合成输出”可以支持所有 AE 特性，但是和 SVGA 中输出序列帧一样，“BMP 预合成输出”性能消耗和动效文件大小也会更大，所以大家在使用时要合理把控，PAG 支持了矢量和 BMP 预合成混合导出，从而实现在支持 AE 所有特性的同时，又保持运行时的可编辑性。
这里我们再把开头的产品对比横向加入 PAG，可以很直观地感受到 PAG 相比其他产品的优势所在：
5. 目前已使用 PAG 的产品
下面这些产品中都应用到了 PAG 这款动效落地方案，包括我们非常熟悉的微信、QQ、王者、腾讯视频等。
小结
目前市面上的动效解决方案各有优劣，Apng 的出现感觉确实很棒，它解决了我们在其他动效方案中所遇见的问题，让设计效率得到了提升，但如果是 PAG，则可以通过“ BMP 预合成导出”方式一键导出，你不需要再去把一些特殊效果进行序列帧输出导入的过程，PAG 会帮你输出这些特殊效果，并做压缩和优化。
1. 序列帧动画
目前 3D 类动画是一个流行的趋势，通常我们都采用的 AE 来制作一些 UI 中的视觉动画效果。
如果我们要制作一些特别的效果，比如用三维软件制作一些 3D 的交互视觉动画，以 C4D 为例，我们可以将制作好的 C4D 动画导出为序列帧，放进 AE 中以“ BMP 预合成输出”我们就可以得到一个三维效果的交互视觉动画，而且 PAG 输出的序列帧动画相比 SVGA 性能优化的更好。
用过 SVGA 的同学，一定尝试过序列帧来输出动效，通过序列帧虽然能给我们带来更炫的视觉效果，同时它也会带来更大的文件体积和显存效果，通过下图同一序列帧动画文件输出对比：PAG 显存消耗比 SVGA 小 40 倍，PAG 文件大小比 SVGA 小 2 倍，相比 SVGA 序列帧输出，显然 PAG 在序列帧输出的优化上做的更好。
2. 礼物打赏动画
礼物打赏类动画是比较社交类产品中最常见的视觉动画，礼物动画比较注重整体的氛围感和视觉效果，因此会用到 AE 第三方插件、脚本等丰富画面视觉效果。
以 SVGA 为例，通常一些特殊视觉效果需要我们做进行序列帧的方式处理，采用 PAG 输出我们可以在需要输出的预合成名字后面加“_bmp”，通过“ BMP 预合成输出”直接导出动画，PAG 会帮你输出这些特殊效果，并做压缩和优化，提升动画输出效率。
3. 悬浮球和图标动画
悬浮球运营位也是产品中运营活动的引流入口，将悬浮球采用动态化的设计，可以提升趣味性和视觉吸引力，图标动画也是非常常见的动画表现形式，比如：Tab bar 图标，礼物打赏图标等。
4. 匹配和弹幕漂屏动画
PAG 也可以制作匹配和飘屏类动画效果，设计师将动画输出给开发，开发可以调用相应方法替换动画中的的图层文件和文本内容，比如：用户匹配成功时的用户头像和名字，以及弹幕飘屏中的用户头像、头像框和用户名字等。
5. Banner 动画
Banner 类运营动画，相信大家肯定看到过支付宝一些运营 Banner 动画，类似这样的动画我们也可以使用 PAG 进行设计制作后输出给运营的同事进行后台配置，相比静态 Banner，动态 Banner 更加具有趣味性，动态元素更吸引用户注意。
6. 徽章动画
徽章动画是社交类产品中很常见的视觉动画，使用动态形式表现徽章能更好的体现出尊贵感，在 PAG 中我们可以直接通过轨道遮罩制作扫光效果会简单很多，同时 PAG 还支持 AE 混合模式，我们可以通过混合模式制作一些图层效果。
其实我很早就关注 PAG 这个动画解决方案了，PAG 出来没多久我就去尝试使用了，算是 PAG 比较早的一批用户吧，目前来看 PAG 相比目前市面上的动画解决方案来说确实很不错，无论从 AE 的特性支持，以及序列帧动画输出的压缩和优化都比市面上的其他解决方案更好，自动检测动效文件错误这个功能，对于经验不丰富的设计师来说很有帮助。
PAG 会在输出时告知你动效文件可能存在的一些问题，性能检测可以让设计师可以提前预判动画所存在的性能风险，从而对动画进行合理的调整，避免因动效性能导致的产品稳定性问题，目前 PAG 团队还在持续迭代优化中，期待后续更多优秀的功能出现。
PAG 原生端和 Web 端 1 月 14 日正式开源，目前可以下载使用，对 PAG 感兴趣的设计师朋友，可以去官网： https://pag.io 了解更多信息。
1. 快速安装 PAG
以 MacOS 系统为例，PAG 的安装个人认为对新手用户是非常友好的，整个安装的过程跟着提示确认就行，相比其他的动画方案安装要简单很多。
2. PAG 插件配置
在"After Effects CC" -> "首选项" -> "PAGConfig..."可以打开 PAG 配置面板，配置面板中分为“通用”和“ BMP 预合成”。 “通用”可以理解为使用 PAG 所支持的 AE 特性制作的动效输出，“ BMP 预合成”则是在动效中采用了特殊效果比如AE 插件或脚本制作的特效。
通用：
BMP 预合成：
3. PAG 设计输出方式
PAG 输出动画有两种模式“矢量预合成输出”和“ BMP 预合成输出”。
“矢量预合成输出”就是通过矢量图形和位图素材利用 PAG 所支持的 AE 特性制作的动效，这种模式输出的优势在于性能好文件体积小，同时可以在桌面端编辑图片预览不同素材下的动画效果，缺点是无法使用一些特殊效果，比如 AE 的第三方插件 “ BMP 预合成输出”就是序列帧的输出形式，因此可以支持 AE 中所有的特殊效果包括第三方插件和脚本效果等，但它的缺点是性能差文件体积大，同时无法在桌面端编辑替换素材。
4. 自动检测动效文件错误
这是非常贴心的一个设计，在输出 PAG 动效时，插件会自动检测当前动效中出现的一些问题，提前告知设计师当前动效存在的一些风险，以便设计师即使做出调整，比如：位图数量太多、图层数量太多等，之前有不少设计朋友问过我 SVGA 输出时不知道出了什么问题，在 PAG 中插件会自动检测提示你可能出现的问题。
5. 性能检测面板
这个功能对于设计师来说是一个很好的功能，很多设计朋友可能更多的关注的是动效的视觉效果，缺忽视了性能的问题，因为通常动效落地方案没有这个功能（SVGA 可以在线查看内存消耗），告诉你性能有问题的一般是开发拿过去测试后发现来告诉你的，但是性能确实还是比较重要的一个事项，因为它可能会直接影响产品的稳定性，有了性能检测面板，设计师可以提前预测到你所产出的动效性能是否合理，在性能面板中可以看到动画时长、播放帧率、显存大小、动画尺寸等，性能面板也给出了性能的参考值，超过这个值会用红色感叹号提示你。
6. 快速编辑预览动画
这个功能适用于“矢量预合成输出”的动效，“ BMP 预合成输出”不支持图片编辑，设计师可以在文本编辑区编辑文本信息，在图片编辑区直接替换当前动效中所使用的位图素材，可以快速验证不同位图素材和文本信息的效果，不用在到 AE 里在去折腾了提升设计效率。
7. 支持音频输出
PAG 是可以支持音频输出的，这对于礼物动画设计的设计师来说是好事，通常需求方都希望比较贵的礼物能带一些 BGM 更有氛围，采用 PAG 的话就可以制作一些带音效的礼物啦，可以在桌面端 PAG 文件结构：getRootLayer：PreComposeLayer -> composition:VectorComposition -> audioBytes 的值，来判断 Pag 文件中音频输入是否导出成功，为 {} 时导出成功，为 null 时导出失败或无音频。
小结
PAG 无论是安装还是 AE 特性支持的都要优于现有的动画方案，两种输出方式可以根据动画效果进行合理选择。自动检测和性能检测能让设计师提前预测可能出现的错误，快速编辑预览帮我们快速尝试不同素材的效果，提高设计效率；支持音频输出对礼物设计来说是件好事。 关于 PAG 的使用介绍我这里只做一些简要的概述，更详细的使用说明大家可以在 PAG 官网中进行查看
本篇来源：优设网
原文地址：https://www.uisdc.com/pag-2
广告
