腾讯研发出新招,从此动画制作就用PAG

开发 前端
目前业界常用的动画工作流解决方案有Lottie和SVGA,都可以将Adobe After Effects(简称AE)制作的动画导出成一个文件,在终端APP中加载渲染使用,在一定程度上提升了动画开发上线的效率。

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的安装和操作都十分简单,无论是设计师和开发工程师都能快速上手。

本文转载自微信公众号「大迁世界」

 

责任编辑:姜华 来源: 大迁世界
相关推荐

2022-01-16 12:10:18

腾讯动画组件PAG

2010-03-18 14:50:55

2012-05-16 09:55:48

2013-08-22 09:24:01

MongoDBHadoopMapReduce

2012-04-22 21:03:57

微软

2013-01-05 09:49:32

微软Windows AzuWindows Azu

2010-01-20 11:02:02

VMware Go

2011-09-27 10:31:04

2011-04-28 10:06:40

日本数据中心地震

2009-10-27 13:54:44

2017-10-17 15:52:35

iPhone

2019-12-25 09:22:15

5GOpenRAN

2021-06-18 12:45:56

无人机微波武器美军

2017-10-11 10:09:13

电商转型零售

2015-06-15 15:14:44

微软Windows AzuAndroid

2013-02-21 15:59:41

傲游云浏览器

2020-07-15 14:41:09

华为云

2022-06-28 15:05:50

无线网络零漫游锐捷

2017-04-14 15:05:18

偶像

2011-12-21 20:39:18

HTC
点赞
收藏

51CTO技术栈公众号