2020年開始，突如其來的疫情讓線上生活形式飛速發(fā)展，短視頻平臺成了廣大網(wǎng)民休閑娛樂、學(xué)習(xí)技能、分享生活的重要途徑。
根據(jù)CNNIC發(fā)布第48次《中國互聯(lián)網(wǎng)絡(luò)發(fā)展?fàn)顩r統(tǒng)計(jì)報(bào)告》顯示，截至 2021 年 6 月您访，我國網(wǎng)絡(luò)視頻用戶規(guī)模達(dá) 9.44 億灵汪，其中短視頻用戶規(guī)模為 8.88 億峻凫，占網(wǎng)民整體的 87.8%命锄，人均單日使用時(shí)長為 125 分鐘脐恩。
在日益壯大的短視頻用戶基數(shù)下，短視頻平臺為了吸引更多流量只怎，動畫設(shè)計(jì)師和開發(fā)需要不斷高效各類創(chuàng)意的特效，以滿足用戶多元的內(nèi)容需求贴谎。
動畫是影響用戶交互很重要的一環(huán)仲翎，現(xiàn)在各平臺實(shí)現(xiàn)動畫很少會采用原生代碼實(shí)現(xiàn)浓恶，那樣開發(fā)成本太高，周期太長伐憾。目前業(yè)界常用的動畫工作流解決方案有Lottie和SVGA扫外，都可以將Adobe After Effects（簡稱AE）制作的動畫導(dǎo)出成一個(gè)文件磁玉，在終端APP中加載渲染使用，在一定程度上提升了動畫開發(fā)上線的效率。
基于以上背景，再給大家推薦一款騰訊研發(fā)的優(yōu)秀動畫制作組件：開源動畫渲染庫PAG聂使。
一宿礁、什么是PAG
官方定義：PAG（Portable Animated Graphics） 是一套完整的動畫工作流。提供從AE導(dǎo)出插件，到桌面預(yù)覽工具PAGViewer沐旨，再到各端的跨平臺渲染 SDK。
下圖為PAG工作流示意榨婆，流程類似Lottie磁携，設(shè)計(jì)師使用AE設(shè)計(jì)好動畫以后，通過PAGExporter插件讀取AE工程文件良风，根據(jù)具體需求選擇矢量導(dǎo)出谊迄、BMP預(yù)合成闷供、混合導(dǎo)出方式中的一種導(dǎo)出一個(gè)PAG二進(jìn)制文件，客戶端對該P(yáng)AG二進(jìn)制文件進(jìn)行解碼统诺、渲染歪脏，各端共享一套C++實(shí)現(xiàn)，平臺端只做接口封裝粮呢。
二唾糯、PAG的優(yōu)勢
對比市面上動畫組件SVGA和Lottie，PAG具有以下幾個(gè)特性：
- 動畫文件小鬼贱，解碼速度快
- 可實(shí)現(xiàn)所有的AE效果
- 配套工具完善，支持實(shí)時(shí)預(yù)覽效果
- 運(yùn)行時(shí)可保留動畫效果并實(shí)時(shí)編輯文字或內(nèi)容
1香璃、動畫文件小这难，解碼速度快
PAG 方案從設(shè)計(jì)之初就把文件格式擺在了最重要的位置，目標(biāo)是打造成為 AE 動畫內(nèi)容的標(biāo)準(zhǔn)承載格式葡秒。
相比 Lottie 方案采用的 JSON 數(shù)據(jù)結(jié)構(gòu)姻乓，PAG 借鑒了經(jīng)歷數(shù)十年行業(yè)考驗(yàn)的 SWF 開源文件格式，采用了更加嚴(yán)謹(jǐn)?shù)亩M(jìn)制數(shù)據(jù)結(jié)構(gòu)眯牧。天然的具有壓縮率更高蹋岩， 解碼速度更快，以及可單文件交付（不外掛圖片）的優(yōu)勢学少。
另外在文件大小上剪个，PAG 通過利用動畫文件本身的特點(diǎn)，獲得了極高的壓縮率版确。通過跳過大量默認(rèn)值的存儲扣囊，使用比特位來緊湊存儲，相同動畫內(nèi)容可以比同類型方案 ** 平均減少50% ** 左右的文件大小绒疗。在性能方面侵歇，PAG 的實(shí)時(shí)渲染性能平均可以達(dá)到 Lottie 的 1.5 到 2.5 倍左右。
2吓蘑、全AE特性支持
Lottie 僅支持矢量的導(dǎo)出方式惕虑，但矢量方式主動只能實(shí)現(xiàn) AE 特性的一個(gè)較小子集。PAG
不僅在矢量導(dǎo)出方式上支持更多的 AE 特性磨镶，還引入了視頻序列幀結(jié)合矢量的混合導(dǎo)出能
力溃蔫，實(shí)現(xiàn)支持所有 AE 特性的同時(shí)，又能保持動畫運(yùn)行時(shí)的可編輯性棋嘲。
3酒唉、配套工具完善，支持實(shí)時(shí)預(yù)覽效果
不同于Lottie沸移、SVGA痪伦，PAG關(guān)于動畫的渲染繪制是在C++層實(shí)現(xiàn)的侄榴，通過自研的2D圖形渲染庫，不依賴平臺端渲染接口网沾，可以實(shí)現(xiàn)各平臺的渲染一致性癞蚕。
桌面預(yù)覽工具PAGViewer確保了渲染結(jié)果跟移動端完全一致，這樣設(shè)計(jì)師可以直觀地看到移動端的展示效果辉哥，而不需要上線來回確認(rèn)桦山。同時(shí)提供性能檢測面板，幫助開發(fā)工程師根據(jù)素材量化的性能指標(biāo)進(jìn)行優(yōu)化醋旦。
三恒水、PAG的技術(shù)能力詳解
接著介紹下PAG優(yōu)勢對應(yīng)的技術(shù)解決方案：
1、BMP預(yù)合成
為了實(shí)現(xiàn)AE特性的全面支持饲齐，PAG采用了 AE的SDK 截圖文件導(dǎo)出的形式钉凌，這樣可以導(dǎo)出任意AE效果，但也有兩個(gè)顯著缺點(diǎn)：1捂人、導(dǎo)出文件過大御雕；2、圖片不可編輯
文件大問題解決方案
針對截圖后文件過大的問題滥搭，PAG組件通過擴(kuò)展視頻格式酸纲，將原圖片序列幀壓縮到近百分之一的大小，再通過支持透明通道瑟匆，如下圖所示闽坡，左邊為RGAB的視頻內(nèi)容，右邊為Alpha通道的灰度圖脓诡，最終渲染的時(shí)候再合并回RGBA的圖片无午，從而實(shí)現(xiàn)對透明通道的支持。渲染的過程中祝谚，由于啟用了硬件加速解碼宪迟，可以直接得到一個(gè)YUV的紋理。而且為了避免紋理在CPU和GPU之間來回拷貝交惯，自定義了Shader腳本次泽，利用硬件加速在一次繪制過程中，同時(shí)完成YUV轉(zhuǎn)換和Alpha通道合并席爽。平均提高了10%的渲染性能意荤。
圖片編輯問題解決方案
針對BMP預(yù)合成無法編輯的特點(diǎn)，PAG將BMP預(yù)合成支持的粒度由文件延伸到合成只锻，支持矢量和BMP預(yù)合成混合導(dǎo)出玖像，從而實(shí)現(xiàn)了支持所有的AE特性又能保持運(yùn)行時(shí)的可編輯性。
2齐饮、圖層編輯
在智能模板時(shí)代捐寥，如一鍵出片笤昨、王者戰(zhàn)報(bào)，模板不再是單個(gè)PAG文件握恳，而是由多個(gè)PAG文件隨機(jī)組合而成瞒窒，根據(jù)業(yè)務(wù)需求去控制組合的規(guī)則。由此PAG引入了圖層渲染數(shù)的編輯架構(gòu)乡洼，不僅支持文本和占位圖比編輯崇裁，還支持圖層級別的編輯。
如下圖束昵，一個(gè)文件就是一棵渲染樹拔稳，支持圖層級別的任意修改位置甚至增刪圖層，也支持將其他PAG文件添加到這棵渲染樹中作為子樹锹雏。在時(shí)間軸的組合上壳炎，PAG具有時(shí)間伸縮的能力，包含循環(huán)逼侦，變速，定格等多種自適應(yīng)模式腰耙。每個(gè)圖層又提供了起始時(shí)間的調(diào)整能力榛丢，能夠自由設(shè)置在時(shí)間軸上的相對位置。
3挺庞、整體視頻渲染
Lottie的動畫方案之所以無法應(yīng)用在視頻合成中晰赞，主要是因?yàn)橐蕾嚵似脚_相關(guān)的UI框架，開發(fā)成本低,选侨，但也導(dǎo)致了它只能渲染到UI視圖上掖鱼，并且無法在子線程中使用。
為了支持離屏渲染繪制援制、子線程渲染戏挡，PAG直接基于C++跨平臺架構(gòu)研發(fā)，一直從最底層的動畫插值器晨仑，還原到上層的時(shí)間軸和圖層渲染樹系統(tǒng)褐墅，雖然開發(fā)成本較高，但是所有端共享同一套代碼洪己，天然的能保障跨端渲染一致性妥凳。最重要的是能直接渲染到離屏紋理上，并完美支持子線程動畫渲染答捕。
4逝钥、服務(wù)端渲染
前面提到，PAG的渲染是基于C++層實(shí)現(xiàn)拱镐，平臺側(cè)僅提供渲染環(huán)境和接口的封裝艘款。在實(shí)際使用中持际，出于成本的考慮，大部分的服務(wù)器仍然是CPU的服務(wù)器磷箕，GPU的服務(wù)器大多應(yīng)用于AI計(jì)算等場景选酗。
AE中的部分特效如高斯模糊、邊角定位等都是通過OpenGL實(shí)現(xiàn)的岳枷，使用skia的CPU渲染模式無法渲染芒填；除了Linux端，其它平臺都可以很好的使用GPU渲染進(jìn)行加速空繁，如果服務(wù)端采用CPU渲染模式殿衰，在代碼層面需要做一系列的兼容處理。為了能兼顧渲染性能和使用成本盛泡，PAG通過CPU模擬GPU的方式來提供OpenGL渲染環(huán)境,并且通過主流Mesa和Swiftshader兩種方案的性能對比闷祥，采用了Swiftshader的渲染方案。
GPU渲染方面傲诵，外部只需要提供EGL環(huán)境凯砍，就可以完成GPU渲染。
四拴竹、總結(jié)
PAG提供了一套簡化并完善的動畫工作流悟衩，在縮小文件體積的情況下，仍然支持所有 AE 特性栓拜，并保留了動畫運(yùn)行可編輯的靈活性座泳。僅需接入一次，設(shè)計(jì)師就可以快速上手使用所有高效組件幕与，不再因研發(fā)成本削弱呈現(xiàn)效果挑势。
目前，PAG方案已經(jīng)廣泛應(yīng)用于騰訊公司內(nèi)外幾十款產(chǎn)品中啦鸣，涵蓋了眾多的國民級應(yīng)用潮饱，如微信、QQ诫给、騰訊視頻饼齿、QQ音樂、王者榮耀蝙搔、QQ空間等缕溉。
[圖片上傳失敗...(image-254a1a-1641900211661)]
并且騰訊PAG在1月14日正式開源，現(xiàn)在可以介入SDK使用吃型，設(shè)計(jì)師和開發(fā)小哥哥們可以妥妥的用起來了证鸥！
在官網(wǎng)就可以下載體驗(yàn)，附上官網(wǎng)鏈接：https://pag.io
附錄——簡要使用介紹
如何安裝PAG ：
目前PAG支持mac（macOS 10.9以上）和windows操作系統(tǒng)，安裝和使用都很簡單枉层，以mac系統(tǒng)為例泉褐，首先需要安裝PAGViewer，選擇圖形化安裝即可鸟蜡；然后打開 PAGViewer膜赃，PAGViewer 將自動檢測是否需要安裝/更新 AE 導(dǎo)出插件，按提示安裝即可揉忘。也可查看使用鏈接：https://pag.io/docs/install.html
接著就可以安裝AE導(dǎo)出插件：
如何導(dǎo)出PAG文件跳座？
a.導(dǎo)出全矢量預(yù)合成的PAG文件
點(diǎn)擊選中需要導(dǎo)出的合成(Composition)，然后點(diǎn)擊菜單“文件” -> “導(dǎo)出” -> “PAG File...”泣矛，選擇要保存的路徑即可導(dǎo)出疲眷。導(dǎo)出成功后雙擊導(dǎo)出的PAG文件可以直接預(yù)覽動畫。
b.導(dǎo)出全BMP預(yù)合成的PAG文件
將需要導(dǎo)出的合成(Compostion)修改為后綴為"_bmp"或"_BMP"的名字您朽，標(biāo)記總合成為「BMP預(yù)合成」狂丝，其他操作同上矢量導(dǎo)出模式。（注：BMP預(yù)合成后綴可以更改哗总，詳見《插件選項(xiàng)配置面板）》
c.導(dǎo)出矢量和BMP預(yù)合成混合的PAG文件
可將總合成（Composition）命名為不帶"_bmp"或"_BMP"后綴的名字几颜，它所引用的部分子合成命名為帶"_bmp"或"_BMP"后綴的名字，然后按正常流程導(dǎo)出PAG文件即可讯屈。
總體來說菠剩，PAG的安裝和操作都十分簡單，無論是設(shè)計(jì)師和開發(fā)工程師都能快速上手耻煤。
