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 的装置和操作都非常简略，无论是设计师和开发工程师都能疾速上手。