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++实现，平台端只做接口封装。

二、PAG的劣势

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

  • 动画文件小，解码速度快
  • 可实现所有的AE成果
  • 配套工具欠缺，反对实时预览成果
  • 运行时可保留动画成果并实时编辑文字或内容

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

PAG 计划从设计之初就把文件格式摆在了最重要的地位，指标是打造成为 AE 动画内容的规范承载格局。

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

另外在文件大小上，PAG 通过利用动画文件自身的特点，取得了极高的压缩率。通过跳过大量默认值的存储，应用比特位来紧凑存储，雷同动画内容能够比同类型计划 均匀缩小50% 左右的文件大小。在性能方面，PAG 的实时渲染性能均匀能够达到 Lottie 的 1.5 到 2.5 倍左右。

2、全AE个性反对

Lottie 仅反对矢量的导出形式，但矢量形式被动只能实现 AE 个性的一个较小子集。PAG
不仅在矢量导出形式上反对更多的 AE 个性，还引入了视频序列帧联合矢量的混合导出能
力，实现反对所有 AE 个性的同时，又能放弃动画运行时的可编辑性。

3、配套工具欠缺，反对实时预览成果

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

桌面预览工具PAGViewer确保了渲染后果跟挪动端完全一致，这样设计师能够直观地看到挪动端的展现成果，而不须要上线来回确认。同时提供性能检测面板，帮忙开发工程师依据素材量化的性能指标进行优化。

三、PAG的技术能力详解

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

1、BMP预合成

为了实现AE个性的全面反对，PAG采纳了 AE的SDK 截图文件导出的模式，这样能够导出任意AE成果，但也有两个显著毛病：1、导出文件过大；2、图片不可编辑

文件大问题解决方案

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

图片编辑问题解决方案

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

2、图层编辑

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

如下图，一个文件就是一棵渲染树，反对图层级别的任意批改地位甚至增删图层，也反对将其余PAG文件增加到这棵渲染树中作为子树。在时间轴的组合上，PAG具备工夫伸缩的能力，蕴含循环，变速，定格等多种自适应模式。每个图层又提供了起始工夫的调整能力，可能自在设置在时间轴上的绝对地位。

3、整体视频渲染

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

为了反对离屏渲染绘制、子线程渲染，PAG间接基于C++跨平台架构研发，始终从最底层的动画插值器，还原到下层的时间轴和图层渲染树零碎，尽管开发成本较高，然而所有端共享同一套代码，人造的能保障跨端渲染一致性。最重要的是能间接渲染到离屏纹理上，并完满反对子线程动画渲染。

4、服务端渲染

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

AE中的局部特效如高斯含糊、边角定位等都是通过OpenGL实现的，应用skia的CPU渲染模式无奈渲染；除了Linux端，其它平台都能够很好的应用GPU渲染进行减速，如果服务端采纳CPU渲染模式，在代码层面须要做一系列的兼容解决。为了能兼顾渲染性能和应用老本，PAG通过CPU模仿GPU的形式来提供OpenGL渲染环境,并且通过支流Mesa和Swiftshader两种计划的性能比照，采纳了Swiftshader的渲染计划。

GPU渲染方面，内部只须要提供EGL环境，就能够实现GPU渲染。

四、总结

PAG提供了一套简化并欠缺的动画工作流，在放大文件体积的状况下，依然反对所有 AE 个性，并保留了动画运行可编辑的灵活性。仅需接入一次，设计师就能够疾速上手应用所有高效组件，不再因研发老本减弱出现成果。

目前，PAG计划曾经广泛应用于腾讯公司内外几十款产品中，涵盖了泛滥的国民级利用，如微信、QQ、腾讯视频、QQ音乐、王者光荣、QQ空间等。

并且腾讯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

接着就能够装置AE导出插件：

如何导出PAG文件？

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

点击选中须要导出的合成(Composition)，而后点击菜单“文件” -> “导出” -> “PAG File...”，抉择要保留的门路即可导出。导出胜利后双击导出的PAG文件能够间接预览动画。

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

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

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

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

总体来说，PAG的装置和操作都非常简略，无论是设计师和开发工程师都能疾速上手。