2020年开始，突如其来的疫情让线上生活形式飞速发展，短视频平台成了广大网民休闲娱乐、学习技能、分享生活的重要途径。

根据CNNIC发布第48次《中国互联网络发展状况统计报告》显示，截至 2021 年 6 月，我国网络视频用户规模达 9.44 亿，其中短视频用户规模为 8.88 亿，占网民整体的 87.8%，人均单日使用时长为 125 分钟。

在这里插入图片描述

在日益壮大的短视频用户基数下，短视频平台为了吸引更多流量，动画设计师和开发需要不断高效各类创意的特效，以满足用户多元的内容需求。

动画是影响用户交互很重要的一环，现在各平台实现动画很少会采用原生代码实现，那样开发成本太高，周期太长。目前业界常用的动画工作流解决方案有Lottie和SVGA，都可以将Adobe After Effects（简称AE）制作的动画导出成一个文件，在终端APP中加载渲染使用，在一定程度上提升了动画开发上线的效率。

基于以上背景，再给大家推荐一款腾讯研发的优秀动画制作组件：开源动画渲染库PAG。

一、什么是PAG

官方定义：PAG（Portable Animated Graphics） 是一套完整的动画工作流。提供从AE导出插件，到桌面预览工具PAGViewer，再到各端的跨平台渲染 SDK。

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

image.png

二、PAG的优势

对比市面上动画组件SVGA和Lottie，PAG具有以下几个特性：

• 动画文件小，解码速度快
• 可实现所有的AE效果
• 配套工具完善，支持实时预览效果
• 运行时可保留动画效果并实时编辑文字或内容

1、动画文件小，解码速度快

PAG 方案从设计之初就把文件格式摆在了最重要的位置，目标是打造成为 AE 动画内容的标准承载格式。

相比 Lottie 方案采用的 JSON 数据结构，PAG 借鉴了经历数十年行业考验的 SWF 开源文件格式，采用了更加严谨的二进制数据结构。天然的具有压缩率更高， 解码速度更快，以及可单文件交付（不外挂图片）的优势。

另外在文件大小上，PAG 通过利用动画文件本身的特点，获得了极高的压缩率。通过跳过大量默认值的存储，使用比特位来紧凑存储，相同动画内容可以比同类型方案 ** 平均减少50% ** 左右的文件大小。在性能方面，PAG 的实时渲染性能平均可以达到 Lottie 的 1.5 到 2.5 倍左右。

image.png

2、全AE特性支持

Lottie 仅支持矢量的导出方式，但矢量方式主动只能实现 AE 特性的一个较小子集。PAG
不仅在矢量导出方式上支持更多的 AE 特性，还引入了视频序列帧结合矢量的混合导出能
力，实现支持所有 AE 特性的同时，又能保持动画运行时的可编辑性。

3、配套工具完善，支持实时预览效果

不同于Lottie、SVGA，PAG关于动画的渲染绘制是在C++层实现的，通过自研的2D图形渲染库，不依赖平台端渲染接口，可以实现各平台的渲染一致性。

桌面预览工具PAGViewer确保了渲染结果跟移动端完全一致，这样设计师可以直观地看到移动端的展示效果，而不需要上线来回确认。同时提供性能检测面板，帮助开发工程师根据素材量化的性能指标进行优化。

image.png

三、PAG的技术能力详解

接着介绍下PAG优势对应的技术解决方案：

1、BMP预合成

为了实现AE特性的全面支持，PAG采用了 AE的SDK 截图文件导出的形式，这样可以导出任意AE效果，但也有两个显著缺点：1、导出文件过大；2、图片不可编辑

文件大问题解决方案

针对截图后文件过大的问题，PAG组件通过扩展视频格式，将原图片序列帧压缩到近百分之一的大小，再通过支持透明通道，如下图所示，左边为RGAB的视频内容，右边为Alpha通道的灰度图，最终渲染的时候再合并回RGBA的图片，从而实现对透明通道的支持。渲染的过程中，由于启用了硬件加速解码，可以直接得到一个YUV的纹理。而且为了避免纹理在CPU和GPU之间来回拷贝，自定义了Shader脚本，利用硬件加速在一次绘制过程中，同时完成YUV转换和Alpha通道合并。平均提高了10%的渲染性能。

image.png

图片编辑问题解决方案

针对BMP预合成无法编辑的特点，PAG将BMP预合成支持的粒度由文件延伸到合成，支持矢量和BMP预合成混合导出，从而实现了支持所有的AE特性又能保持运行时的可编辑性。

2、图层编辑

在智能模板时代，如一键出片、王者战报，模板不再是单个PAG文件，而是由多个PAG文件随机组合而成，根据业务需求去控制组合的规则。由此PAG引入了图层渲染数的编辑架构，不仅支持文本和占位图比编辑，还支持图层级别的编辑。

如下图，一个文件就是一棵渲染树，支持图层级别的任意修改位置甚至增删图层，也支持将其他PAG文件添加到这棵渲染树中作为子树。在时间轴的组合上，PAG具有时间伸缩的能力，包含循环，变速，定格等多种自适应模式。每个图层又提供了起始时间的调整能力，能够自由设置在时间轴上的相对位置。

image.png

3、整体视频渲染

Lottie的动画方案之所以无法应用在视频合成中，主要是因为依赖了平台相关的UI框架，开发成本低,，但也导致了它只能渲染到UI视图上，并且无法在子线程中使用。

image.png

为了支持离屏渲染绘制、子线程渲染，PAG直接基于C++跨平台架构研发，一直从最底层的动画插值器，还原到上层的时间轴和图层渲染树系统，虽然开发成本较高，但是所有端共享同一套代码，天然的能保障跨端渲染一致性。最重要的是能直接渲染到离屏纹理上，并完美支持子线程动画渲染。

4、服务端渲染

前面提到，PAG的渲染是基于C++层实现，平台侧仅提供渲染环境和接口的封装。在实际使用中，出于成本的考虑，大部分的服务器仍然是CPU的服务器，GPU的服务器大多应用于AI计算等场景。

AE中的部分特效如高斯模糊、边角定位等都是通过OpenGL实现的，使用skia的CPU渲染模式无法渲染；除了Linux端，其它平台都可以很好的使用GPU渲染进行加速，如果服务端采用CPU渲染模式，在代码层面需要做一系列的兼容处理。为了能兼顾渲染性能和使用成本，PAG通过CPU模拟GPU的方式来提供OpenGL渲染环境,并且通过主流Mesa和Swiftshader两种方案的性能对比，采用了Swiftshader的渲染方案。

image.png

GPU渲染方面，外部只需要提供EGL环境，就可以完成GPU渲染。

四、总结

PAG提供了一套简化并完善的动画工作流，在缩小文件体积的情况下，仍然支持所有 AE 特性，并保留了动画运行可编辑的灵活性。仅需接入一次，设计师就可以快速上手使用所有高效组件，不再因研发成本削弱呈现效果。

目前，PAG方案已经广泛应用于腾讯公司内外几十款产品中，涵盖了众多的国民级应用，如微信、QQ、腾讯视频、QQ音乐、王者荣耀、QQ空间等。

[图片上传失败...(image-254a1a-1641900211661)]

并且腾讯PAG在1月14日正式开源，现在可以介入SDK使用，设计师和开发小哥哥们可以妥妥的用起来了！
在官网就可以下载体验，附上官网链接：https://pag.io

附录——简要使用介绍

如何安装PAG ：

目前PAG支持mac（macOS 10.9以上）和windows操作系统，安装和使用都很简单，以mac系统为例，首先需要安装PAGViewer，选择图形化安装即可；然后打开 PAGViewer，PAGViewer 将自动检测是否需要安装/更新 AE 导出插件，按提示安装即可。也可查看使用链接：https://pag.io/docs/install.html

image.png

接着就可以安装AE导出插件：

image.png

如何导出PAG文件？

a.导出全矢量预合成的PAG文件

点击选中需要导出的合成(Composition)，然后点击菜单“文件” -> “导出” -> “PAG File...”，选择要保存的路径即可导出。导出成功后双击导出的PAG文件可以直接预览动画。

image.png

b.导出全BMP预合成的PAG文件

将需要导出的合成(Compostion)修改为后缀为"_bmp"或"_BMP"的名字，标记总合成为「BMP预合成」，其他操作同上矢量导出模式。（注：BMP预合成后缀可以更改，详见《插件选项配置面板）》

c.导出矢量和BMP预合成混合的PAG文件

可将总合成（Composition）命名为不带"_bmp"或"_BMP"后缀的名字，它所引用的部分子合成命名为带"_bmp"或"_BMP"后缀的名字，然后按正常流程导出PAG文件即可。

总体来说，PAG的安装和操作都十分简单，无论是设计师和开发工程师都能快速上手。