2020年開始，突如其來的疫情讓線上生活形式飛速發展，短影片平臺成了廣大網民休閒娛樂、學習技能、分享生活的重要途徑。

根據CNNIC釋出第48次《中國網際網路絡發展狀況統計報告》顯示，截至 2021 年 6 月，我國網路影片使用者規模達 9.44 億，其中短影片使用者規模為 8.88 億，佔網民整體的 87.8%，人均單日使用時長為 125 分鐘。

在日益壯大的短影片使用者基數下，短影片平臺為了吸引更多流量，動畫設計師和開發需要不斷高效各類創意的特效，以滿足使用者多元的內容需求。

動畫是影響使用者互動很重要的一環，現在各平臺實現動畫很少會採用原生程式碼實現，那樣開發成本太高，週期太長。目前業界常用的動畫工作流解決方案有Lottie和SVGA，都可以將Adobe After Effects（簡稱AE）製作的動畫匯出成一個檔案，在終端APP中載入渲染使用，在一定程度上提升了動畫開發上線的效率。

基於以上背景，再給大家推薦一款騰訊研發的優秀動畫製作元件：開源動畫渲染庫PAG。

l 一、什麼是PAG

官方定義：PAG（Portable Animated Graphics） 是一套完整的動畫工作流。提供從AE匯出外掛，到桌面預覽工具PAGViewer，再到各端的跨平臺渲染 SDK。

下圖為PAG工作流示意，流程類似Lottie，設計師使用AE設計好動畫以後，透過PAGExporter外掛讀取AE工程檔案，根據具體需求選擇向量匯出、BMP預合成、混合匯出方式中的一種匯出一個PAG二進位制檔案，客戶端對該PAG二進位制檔案進行解碼、渲染，各端共享一套C++實現，平臺端只做介面封裝。

l 二、PAG的優勢

對比市面上動畫元件SVGA和Lottie，PAG具有以下幾個特性：

l 動畫檔案小，解碼速度快

l 可實現所有的AE效果

l 配套工具完善，支援實時預覽效果

l 執行時可保留動畫效果並實時編輯文字或內容

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確保了渲染結果跟移動端完全一致，這樣設計師可以直觀地看到移動端的展示效果，而不需要上線來回確認。同時提供效能檢測面板，幫助開發工程師根據素材量化的效能指標進行最佳化。

l 三、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渲染。

l 四、總結

PAG提供了一套簡化並完善的動畫工作流，在縮小檔案體積的情況下，仍然支援所有 AE 特性，並保留了動畫執行可編輯的靈活性。僅需接入一次，設計師就可以快速上手使用所有高效元件，不再因研發成本削弱呈現效果。

目前，PAG方案已經廣泛應用於騰訊公司內外幾十款產品中，涵蓋了眾多的國民級應用，如微信、QQ、騰訊影片、QQ音樂、王者榮耀、QQ空間等。

並且騰訊PAG在1月14日正式開源，現在可以介入SDK使用，設計師和開發小哥哥們可以妥妥的用起來了！

在官網就可以下載體驗，附上官網連結：https://pag.io

附錄——簡要使用介紹

l 如何安裝PAG ：

目前PAG支援mac（macOS 10.9以上）和windows作業系統，安裝和使用都很簡單，以mac系統為例，首先需要安裝PAGViewer，選擇圖形化安裝即可；然後開啟 PAGViewer，PAGViewer 將自動檢測是否需要安裝/更新 AE 匯出外掛，按提示安裝即可。也可檢視使用連結：https://pag.io/docs/install.html

接著就可以安裝AE匯出外掛：

l 如何匯出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的安裝和操作都十分簡單，無論是設計師和開發工程師都能快速上手。