产品介绍｜PAG：消除动效研发成本

图片

PAG 是腾讯多媒体技术委员会下 AVGenerator Oteam开源协同小组自主研发的一套完整的动效工作流解决方案，致力于将 AE （Adobe After Effects）动效一键导出并快捷地应用于各平台和终端。和业界常用的动效工作流解决方案相比，PAG支持的 AE 特性更多，覆盖的平台更广（Android、iOS、Web、macOS、Windows和Linux），性能方面也做了深层次的优化，支持文本和占位图编辑替换，可以与视频编辑场景紧密结合。目前已经广泛应用于公司内外几十款 APP，包含微信、手机 QQ、王者荣耀、哔哩哔哩、虎牙直播等头部 App。

一、PAG诞生的背景

从 AE 动效制作到终端 App 呈现，传统的实现方式如下图所示，有三大痛点：实现成本高、沟通成本高和性能难以保证。

图片

近几年，业界诞生了像Lottie、SVGA这样的动效工作流解决方案，Lottie 最早从 UI 动画场景出发解决矢量动效渲染的问题，从官方社区来看，我们能容易发现 Lottie 的矢量基因，社区作品大多是矢量图形类动效。SVGA 是 YY 直播的开发工程师 2017 年发布的一套跨平台动效解决方案，诞生于直播场景，SVGA 不支持复杂矢量图形动效，对位图动效的支持超过 Lottie，其最初的目标是为了改善和弥补 Lottie。不可否认，两者都是业界优化的动效解决方案。PAG 诞生于 2016 年，最初的原因是为了解决更为复杂的视频编辑场景下动效渲染问题，同时又完美覆盖了UI动画和直播场景。

一个有意思的共同点，以上三种方案的作者都有比较丰富的 Flash 相关背景，都在把 Flash 完善动效工作流的实现方式带到移动端，三者出发的场景不同，因此实现的方式也会存在一些差异。

下图是三种实现方案的简单对比。

图片

二、完善的动效工作流解决方案

PAG的工作流程图如下图所示，设计师使用 AE 设计好动效以后，通过 PAGExporter 插件读取 AE 工程文件，根据具体需求选择矢量导出、BMP 预合成、混合导出方式中的一种导出PAG 二进制文件，客户端对该 PAG 二进制文件进行解码、渲染，各端共享一套 C++ 实现，平台端只做接口封装。

图片

相对传统研发还原的方式，PAG 方案显著提升了动效素材上线的效率：设计师设计完成后可以直接输出动效文件，研发不需要再参与代码还原，只需要接入一次SDK即可做到素材自助上线，也避免了反复进行效果确认的联调时间成本，并且还能够批量化生产素材，从流程上直接取代传统小工作坊形式，利用工业化生产方式大幅提升设计和研发效率。

PAG的工作流程主要包含三部分：

PAG 渲染SDK、导出插件 PAGExporter和桌面预览工具PAGViewer。

跨平台渲染SDK

PAG渲染SDK目前已经涵盖了Android、iOS、Web、macOS、Windows和Linux等几乎所有的主流平台。PAG SDK的渲染主体通跨平台的C++来实现，所有平台均一致开启GPU硬件加速，除了可以确保各平台测的渲染一致性外，也能轻松实现跟音视频编辑拍摄等复杂场景的深度融合。关于PAG SDK的一些技术特色，我们会在下个章节进一步阐述。

便捷的导出插件

针对设计师设计动效的痛点，导出插件增加使用了不支持 AE 特性提醒功能，支持一键设置BMP 预合成、设置占位图的填充模式、设置 PAG 动效的伸缩模式等。另外导出插件内置了数十种自动优化素材的策略，让设计师轻松制作出效果和性能俱佳的动效素材。

图片

图片

完善的桌面预览工具

实时效果预览

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

图片

性能检测可视化

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

图片

三、PAG的技术特色

AE特性全面支持

无论是PAG还是Lottie、SVGA，所支持的AE特性仅仅是AE众多特性中的很少的一部分，这在一定程度上限制了设计师的创造力。针对这个问题，PAG新增了BMP预合成的导出方式，支持导出所有AE特性，其原理如下图所示，在合成的层面将渲染结果截取成图片，然后进行视频编码。

图片

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

图片

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

图片

高效的动效文件

图片

PAG动效文件采用了二进制的数据结构来存储AE动效信息。二进制数据结构能够非常方便的单文件集成任何资源，如位图、音频、视频资源等，实现单文件交付。同时二进制数据结构不需要像JSON一样处理字符串匹配问题，解码速度可以快90%以上。另外在压缩率方面，相比JSON，二进制数据结构可以跳过Key的内容，只存储Value，这样能节省大量空间。如果只做到这个程度，其实就是Protocol Buffers这种通用的二进制序列化方案的原理。为了进一步压缩数据，结合AE动效数据的特征，利用时间轴属性存在默认值和AE动效中存在大量连续整形、Float类型数据的特点，PAG采用了动态比特位压缩的技术，实现了比特位级别的存储和读取，大大减少了存储的冗余空间。

经过一系列的压缩策略，导出相同的 AE 动效内容，在文件解码速度和压缩率上均大幅领先于同类型方案。采用可扩展的二进制文件格式，可单文件集成包含图片、音频等任意设计资源。

运行时可编辑

在保留设计预设动效效果的前提下，PAG支持在运行时轻松替换文本和占位图的内容，能够大幅降低类似照片模板和视频模板的研发成本。

PAG 支持的编辑特性不仅限于占位资源的替换，还支持图层级别的自由组合。其基本原理是引入了图层渲染树的编辑架构，一个文件就是一棵渲染树，支持图层级别的任意修改位置甚至增删图层，也可以把别的PAG文件添加到这棵渲染树中作为子树。能在空间维度上进行自由的排列摆放。而在时间轴的组合上，我们提供了PAG时间伸缩的能力，包含循环，变速，定格等多种自适应模式。每个图层又提供了起始时间的调整能力，支持自由设置在时间轴上的相对位置，能够灵活适配用户视频的时长。

图片

经过这些改造，新的接口不仅满足了UI动画的编辑性需求，还满足了视频后编辑模板类的需求。如在照片模板和视频模板场景中，固定时间轴和尺寸的模板已经逐渐出现了在应用上的瓶颈。特别是当一键出片、王者战报等智能模板需求的出现，整个模板不是由固定的时间轴组成，而是可能由多个原子特效组件拼装而成。现在无论哪种使用场景，都可以简化为两个步骤：利用空间和时间的组合能力构建一个渲染树，然后播放或者导出即可。

整合视频渲染

PAG和Lottie方案很重要的一个区别点就是应用场景的不同，Lottie方案依赖了平台相关的UI框架，开发成本较低，但也导致了它只能渲染到UI视图上，并且无法在子线程中使用。这样的设计可以很好的满足UI动画场景下的使用，但难以应用在视频编辑场景下。

PAG的整套动效方案是基于C++跨平台架构研发的，从最底层的动效插值器，还原到上层的时间轴和图层渲染树系统，虽然开发成本较高，但是所有端共享同一套代码，天然的能保障跨端渲染一致性。最重要的是能直接渲染到离屏纹理上，并完美支持子线程动效渲染，从而实现与视频编辑SDK框架的无缝整合。同时，针对视频编辑场景对于性能要求严格的特点，如单帧渲染并行的存在视频编解码及各种特效处理，这时候留给PAG的渲染时间就不太多了。为了提高实时预览的性能，PAG进行了两个方向的优化。第一个方向是根据动效文件的本身的特点，利用素材静态区间可跳过重复的绘制。第二个方向是利用空间换时间的思路，在PAG渲染内部设计了三级缓存架构。文件缓存解决了单个PAG文件添加多次解码复用的问题，绘制缓存解决了帧间绘制缓存复用的问题，根据渲染内容一般不会随着时间轴变化，反而是轻量的矩阵参数会频繁的变化的特点，增加了内容缓存，避免了重复内容的绘制，从而提升了单帧渲染的性能。

经过以上处理，PAG不仅很好的支持了UI动画的场景，并且将PAG动效的使用拓展到了视频编辑、拍摄以及直播对于性能要求更高的场景。

四、PAG的应用场景

总结下来，PAG 目前主要使用在以下几大场景：

UI动画

图片

设计师设计出动效文件后，研发只需要替换预设的文本内容即可，并且文件体积非常小。

贴纸动效

图片

PAG 的动效文件可以在任意子线程渲染，可以合成到视频画面，作为贴纸、字幕、特效、转场动效使用，且支持保留动效效果前提下让用户自己修改文本内容。

贴照片/视频模版

图片

PAG 支持将内置的图片作为占位图替换，并保留所有动效效果。因此可以将整个 PAG 动效设计成一个模板，把预设的占位图替换成用户选取的照片，自动套用效果生成视频。全程可以让设计师自由批量生产模板，无需研发介入。仍然基于图片替换原理，PAG 也支持将占位图替换为视频，实现视频模板功能。

智能剪辑

图片

智能剪辑是围绕用户上传的视频内容，生成定制化的模板，模板本身是不固定的，由多个 PAG 文件组合而成，类似活字印刷。设计师可以利用这个特性，构建自己的特效组件库，然后对接AI的识别能力，根据一定规则组合得到无限数量的模板效果，可以做到一键出片。这块目前的典型应用场景是王者荣耀的周战报功能，随机生成游戏高光时刻视频。

五、已接入使用的产品

据不完全统计，PAG已经接入了腾讯内外70+ APP或业务，包含微信、QQ、王者荣耀、腾讯视频、QQ音乐、哔哩哔哩、京东生活助手、虎牙直播等头部APP，下面是部分已经接入的APP或业务。

图片

六、开源共建

PAG现已开源

Github地址：

https://github.com/Tencent/libpag

欢迎广大设计师和开发者参与，使用或共建 PAG 动效工作流。

微信公众号：PAG动效

图片

如果想了解、接入PAG，欢迎访问PAG的官网或微信公众号。