腾讯这一款设计神器，开源了！

作为一个资深的互联网用户，我们经常会在各种产品上看到十分酷炫的动画效果。比如，短视频中有趣的虚拟场景、直播间粉丝打榜的 “火箭”、“轮船” 等等。

如今，优质的动效不仅可以使用户更容易地理解产品功能和操作方式，减少用户使用难度，还能增加用户与产品的互动性，提升产品的打开率。

无数的动效设计师和开发人员，为了这些极具创意的动画特效花费大量心血，但最终动效需求交付的过程漫长，不仅质量没法保证，效果也仍旧不尽如人意。

前几天，我偶然在 GitHub 发现了一个非常实用的开源项目，能完美解决上述问题。

这个项目，就是腾讯开源的：PAG 动效组件。

GitHub：https://github.com/Tencent/libpag

该项目开源仅一年时间，便快速接入了 600 + 的互联网业务，其中不乏微信、小红书、QQ、知乎等很多头部领域应用。

在详细介绍 PAG 以前，我先带大家了解一下动效行业的现状。

以这样典型的视频模板为例，从 AE 动效制作到终端 App 呈现，最终上线时间往往要以周计算。

为什么这么久，这里我放一张 PAG 的优劣势对比图，你就知道了。

总的来说，PAG 项目可以极大消除研发成本，同时释放设计师的生产力和创意。

这到底是怎么做到的？下面就带大家详细了解下。

整体流程

PAG 动效工作流主要包含 AE 导出插件 PAGExporter、桌面端预览工具 PAGViewer 和各平台端的 PAG SDK 三部分。

PAG 的工作流程图下所示：

设计师从 AE 中设计出动效后，通过插件导出 pag 文件，然后用 PAG 桌面端预览工具，直接实时预览效果。

在确认效果后，通过运营配置上线，各平台终端可以通过 PAG SDK 加载渲染 pag 动效。

PAG 动画工作流流程图

技术优势

通过阅读 PAG 官方提供的资料，相对比 Lottie 和 SVGA，我发现 PAG 具有以下技术优势：

1) 文件更小

PAG 采用针对 AE 时间轴属性设计的二进制文件编码器，能够使用动态比特位紧凑存储，冗余信息极少，文件体积最小，解码速度最快，且支持单文件集成图片和音频等外部资源。导出相同的 AE 动效内容，在文件解码速度和压缩率上均大幅领先于同类型方案。

2) 全 AE 特性支持

在纯矢量的导出模式下，无论是哪种实现方案，在众多的 AE 特性面前，都只支持将有限的 AE 特性导出渲染，PAG 方案提供了 BMP 预合成的解决方案，支持将特定图层截图导出成透明视频，实现了对于所有 AE 特性导出的支持。其原理如下图所示，在合成的层面将渲染结果截取成图片，然后进行视频编码：

针对视频不支持透明通道而动效需要包含透明通道的问题，在编码的层面扩展了透明通道的支持，如下图所示。

由于采用的是截图的方式，BMP 预合成不支持可编辑。为了保持动效的可编辑性，PAG 增加支持了矢量和 BMP 预合成混合导出，从而实现在支持 AE 所有特性的同时又保持运行时的可编辑性，满足了不同业务场景的需求。

3) 渲染架构

相对于 Lottie 、SVGA 依赖于平台端相关的渲染接口，PAG 使用了跨平台一致的 C++ 架构，平台层面仅仅提供渲染环境，渲染的主体位于 C++ 层，可以实现跨平台的渲染一致性。

4）运行时编辑

PAG 不仅仅支持文本图层的文本编辑、图片图层的占位图替换，还支持图层级别的增加、删除及更改渲染位置，实现原子素材的自由组合，典型的应用场景就是视频模版和游戏战报，一个模版中由多个 pag 有机组合在一起。

5）支持的平台更多

PAG 可支持 Android、iOS、Web、macOS、Windows、Linux 和微信小程序，基本上可以说是全平台覆盖了。

完善的工具链

除了技术上的优势，PAG 对设计师也非常友好。

比如，设计师们可以在 AE 插件和 PAGViewer 中进行多项设置和修改，极大程度地方便动效输出工作。

1）便捷的导出插件

针对动效设计的痛点，导出插件增加使用了不支持 AE 特性提醒功能，支持一键设置 BMP 预合成、设置占位图的填充模式、设置 PAG 动效的伸缩模式等。

另外，导出插件内置了数十种自动优化素材的策略，让用户轻松制作出效果和性能俱佳的动效素材。

2）完善的桌面预览工具

a. 实时效果预览

桌面预览工具不仅支持桌面端预览动效效果，还支持本地填充素材，实时预览填充效果，无需等待上线后才能确认真实效果，避免了大量来回返工的成本。

b. 性能检测可视化

性能检测可以很方便的看到 PAG 动效的基本信息，还有量化的性能指标，定量的评估 PAG 文件的性能，方便进行针对性的优化，而不需要等到上线前才会暴露性能问题。

快速使用指南

1）研发 SDK 接入

由于 PAG 几乎可以支持目前市面上所有的平台的渲染，而各平台 SDK 接入方法又不尽相同，在这里就不一一介绍了，在 GitHub 都有非常详细的指引，大家可以去看下。

https://github.com/Tencent/libpag/wiki

2）设计师快速使用

这里简单介绍下设计师的使用：

下载安装 PAG 相关的插件：PAGViewer、PAG 的 AE 导出插件。

花几分钟了解下 PAG 的导出规则，就可以开始使用了。

具体的下载指引和规则参考官网：https://pag.art/docs/install.html

里面同时还有非常易学详尽的进阶使用教程，真的可以说非常良心。

百闻不如一见，这里放个官方视频，让大家对 PAG 这个开源项目有个更好的理解：

作为一个 GitHub 开源项目来说，PAG SDK 的能力真的太全面了。

它提的供所见即所得的桌面工具和 AE 插件，能够一键将设计师的创意导出成 PAG 文件，并通过 SDK 快速渲染到几乎所有的主流平台上，不仅消除了动效上线的研发成本，也大大提升了效率！

有了它不管是研发还是设计，都能在面对动效上线时轻松许多。

目前，PAG 方案已经接入了腾讯系 600 余款应用，包括微信，王者荣耀，腾讯视频，QQ音乐等产品，稳定性经过了海量用户的持续验证。

最后，再附上 PAG 相关的资源，以便各位进一步了解：

GitHub：https://github.com/Tencent/libpag

官网：https:/pag.art/