2020年以来，突如其来的疫情带动了线上生活的快速发展。短视频平台已经成为网民休闲、学习技能、分享生活的重要途径。据CNNIC发布的第48期《中国互联网络发展状况统计报告》，截至2021年6月，我国网络视频用户规模已达9.44亿，其中短视频用户为8.88亿，占网民总数的87.8%，人均日使用时长为125分钟。随着短视频用户基数的不断扩大，为了吸引更多的流量进入短视频平台，动画设计师和开发者需要持续高效地创作各种特效以满足用户多样化的内容需求。动画是影响用户交互的一个非常重要的部分。现在各种平台的动画很少用原生代码实现，这样开发成本太高，时间太长。目前业界常用的动画工作流解决方案有Lottie和SVGA，两者都可以将AdobeAfterEffects（简称AE）制作的动画导出为文件，在终端APP中加载渲染，提高了动画的开发和推出在一定程度上。效率。基于以上背景，推荐腾讯开发的一款优秀的动画制作组件：开源动画渲染库PAG。1、PAG的官方定义是什么：PAG（PortableAnimatedGraphics）是一个完整的动画工作流程。提供AE导出插件，桌面预览工具PAGViewer，全端提供跨平台渲染SDK。下图显示了PAG的工作流程。这个过程类似于Lottie。设计师在使用AE设计完动画后，通过PAGEExporter插件读取AE工程文件，根据具体需要选择矢量导出、BMP预合成、混合导出方式中的一种导出。PAG二进制文件，客户端对PAG二进制文件进行解码渲染，两端共享一套C++实现，平台端只做接口封装。2、PAG的优势与市面上的动画组件SVGA、Lottie相比，PAG具有以下特点：动画文件小，解码速度快，可以实现所有AE效果。配套工具完善，支持实时预览效果。运行时可保留动画效果，实时编辑文字或内容1.动画文件小，解码速度快。PAG解决方案从设计之初就把文件格式放在了最重要的位置，目标是为AE动画内容创建一个标准格式。相较于Lottie方案使用的JSON数据结构，PAG借鉴了经过业界数十年考验的SWF开源文件格式，采用了更加严谨的二进制数据结构。自然具有压缩率更高、解码速度更快、单文件传送（无外来图片）等优点。另外，在文件大小方面，PAG利用动画文件本身的特点，获得了非常高的压缩率。通过跳过大量默认值的存储，使用bits进行紧凑存储，与同类方案相比，相同动画内容的文件大小平均减少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采用AESDK截图文件的导出形式，可以实现任何AE效果出口。但是也有两个明显的缺点：1.导出的文件太大；2.图片无法编辑。解决截图后文件体积大的问题，PAG组件通过扩展视频格式，将原始图片序列帧压缩到接近100%。一个尺寸，然后通过支持透明通道，如下图，左边是RGBA通道的视频内容，右边是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++跨平台架构开发，已经从底层动画插值器还原到上层时间轴和图层渲染树系统。虽然开发成本高，但是所有End-to-end共享同一套代码，自然保证了跨端渲染的一致性。最重要的是它可以直接渲染到离屏纹理，完美支持子线程动画渲染。4.服务端渲染前面提到，PAG的渲染是基于C++层实现的，平台端只提供渲染环境和接口的封装。在实际使用中，出于成本考虑，大部分服务器还是CPU服务器，GPU服务器多用于AI计算等场景。AE中的一些特效，如高斯模糊、角点定位等，都是通过OpenGL实现的，使用skia的CPU渲染方式是无法渲染的；除了Linux，其他平台都可以使用GPU渲染来加速，如果服务器使用CPU渲染方式需要在代码层面进行一系列的兼容处理。为了平衡渲染性能和使用成本，PAG通过CPU模拟GPU提供OpenGL渲染环境，通过主流Mesa和Swiftshader方案性能对比，采用Swiftshader渲染方案。在GPU渲染方面，只需要对外提供EGL环境即可完成GPU渲染。4.总结PAG提供了一套简化而完整的动画工作流程。在减小文件大小的情况下，仍然支持所有AE功能，并保留了动画运行和编辑的灵活性。只需一个连接，设计人员即可快速开始使用所有高效元器件，演示效果将不再因研发成本而减弱。目前，PAG解决方案已广泛应用于腾讯内外数十款产品，覆盖了微信、QQ、腾讯视频、QQ音乐、王者荣耀、Q空间等众多国民级应用。1月14日正式开源，现已可在SDK中使用，设计开发者可放心使用！可以在官网下载体验，附上官网链接：https://pag.io附录-PAG安装简单介绍：目前PAG支持mac（macOS10.9及以上）和windows操作系统系统，安装和使用非常简单。以mac系统为例，首先需要安装PAGViewer，可以选择图形化安装；然后打开PAGViewer，PAGViewer会自动检测是否需要安装/更新AE导出插件，并根据提示进行安装。也可以查看使用链接：https://pag.io/docs/install.html然后就可以安装AE导出插件了：HowtoexportPAGfiles?A。导出全矢量预合成PAG文件点击选择要导出的合成，然后点击菜单“文件”->“导出”->“PAG文件...”，选择保存路径，然后导出。导出成功后，双击导出的PAG文件即可直接预览动画。b.导出所有BMP预合成PAG文件将要导出的构图（Composition）更改为后缀为“_bmp”或“_BMP”的名称，将总构图标记为“BMP预合成”，其他操作同上如上面的矢量导出模式。（注：BMP预合成后缀可以改，详见《插件选项配置面板）》c。导出矢量和BMP预合成混合的PAG文件，可以将总构图（Composition）命名为不带“_bmp”的名称”或“_BMP”后缀，将引用的部分子合成命名为“_bmp”或“_BMP”后缀，即可按正常流程导出PAG文件。一般来说，PAG的安装和运行是很简单，不管是设计师还是开发工程师都能快速上手。
