森林舞会游戏 APP下载

腾讯研收回新招,往后动画制作就用PAG

发布日期:2022-08-06 18:19    点击次数:137

2020年起头,突如其来的疫情让线上生活生计情势飞速倒退,短视频平台成为了泛博网平易近休闲娱乐、深造技能、分享生活生计的首要路线。

痛处CNNIC宣布第48次《中国互联网络倒退状况统计报告》体现,制止 2021 年 6 月,我国网络视频用户局限达 9.44 亿,个中短视频用户局限为 8.88 亿,占网平易近总体的 87.8%,人均单日应历时长为 125 分钟。

在日趋弱小的短视频用户基数下,短视频平台为了吸引更多流量,动画策画师和开发需要接续高效各类创意的特效,以餍足用户多元的内容需要。

动画是影响用户交互很首要的一环,而今各平台实现动画很少会给与原生代码实现,那样开发成本过高,周期过长。而今业界经常使用的动画事变流经管规划有Lottie和SVGA,均可以或许将Adobe After Effects(简称AE)制作的动画导出成一个文件,在终端APP中加载衬着应用,在必定程度上提升了动画开发上线的效劳。

基于以上背景,再给巨匠推选一款腾讯研发的优异动画制作组件:开源动画衬着库PAG。

 1、什么是PAG

平易近间定义:PAG(Portable Animated Graphics) 是一套完备的动画事变流。供应从AE导出插件,到桌面预览器材PAGViewer,再到各端的跨平台衬着 SDK。

下图为PAG事变流示意,流程近似Lottie,策画师应用AE策画好动画之后,经由过程PAGExporter插件读取AE工程文件,痛处具体需要抉择矢量导出、BMP预解析、混淆导出要领中的一种导出一个PAG二进制文件,客户端对该PAG二进制文件举行解码、衬着,各端同享一套C++实现,平台端只做接口封装。

 2、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 特点的同时,又能对立动画运行时的可编辑性。

三、配套器材完善,支持实时预览结果

差别于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具有时光伸缩的才能,包孕循环,变速,定格等多种自适应情势。每个图层又供应了肇端时光的调整才能,兴许自由设置在时光轴上的相对职位地方。

 

 

三、 总体视频衬着

Lottie的动画规划之所以没法应用在视频解析中,主若是因为寄托了平台相干的UI框架,开发成本低,,但也导致了它只能衬着到UI视图上,并且没法在子线程中应用。

 

 

为了支持离屏衬着绘制、子线程衬着,PAG间接基于C++跨平台架构研发,一贯从最底层的动画插值器,还原到基层的时光轴和图层衬着树体系,诚然开发成本较高,然则全体端同享同一套代码,人造的能保障跨端衬着分歧性。最首要的是能间接衬着到离屏纹理上,并完善支持子线程动画衬着。

四、 服务端衬着

前面提到,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的按部就班和操作都异常俭朴,不管是策画师和开发工程师都能倏地上手。

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