給 1 分鐘的王者“擊殺”合集做一系列炫酷動畫，並整合到客戶端的一鍵戰報生成功能中，需要多長時間？就像這樣，帶“開黑局”專屬的轉場動畫，英雄暱稱 KDA 一應俱全：

能在每段“高光”操作出現時，加上一段文字動效渲染氣氛：

還可以在出現“三殺”等極限操作的時候，配合英雄來一把炸場效果：

對於特效設計師和客戶端的開發人員們而言，從設計完成到研發還原效果上線的時間原本應該在一週以上：畢竟設計師不光要在 AE 裡搞定特效設計，還得跟研發人員反覆確認程式碼的效果還原度。碰上特效太複雜、動畫檔案太大等情況，免不了又是一場辦公室 battle……

這種掉頭髮傷感情的事，早已讓程式設計師們坐不住了。這不，他們乾脆搞出了一套自動化工具，用上它最快 4 小時就可以交付上線一個動畫。

而最近，這個由騰訊 PCG 釋出器中臺開發，名為 PAG（Portable Animated Graphics）的工具傳出“即將對外開源”的訊息，更是直接在動畫設計師和研發圈子裡點燃了一把火。畢竟，官方郵箱裡早已塞滿來自外部的 SDK 申請和開源許願貼。

所以，PAG 到底是怎麼一回事，能讓研發和設計師們如此躍躍欲試？

PAG 是什麼？

簡單來說，PAG 是一套完整的動畫工作流。在 PAG 出現之前，理想的移動端動畫製作流程是這樣的：設計師們先用 AE（Adobe Effect）設計出一段動畫效果，匯出動畫效果檔案（gif 或視訊 Demo）並交給研發；然後，研發們嘗試用程式碼還原動畫，渲染出我們在移動端看到的效果。

但實際上，設計和研發的（一整週）工作流程是這樣的：

雙方 battle 的問題包括且不限於：從研發角度來看，並非設計給出的所有特效都能在手機上實現。

如果系統不支援特效實現方式，即使它非常酷炫狂拽，使用者也無法體驗。例如，某個互動特效在安卓和 iOS 上都無法實現，研發就可能把它打回給設計“重做”。除了無法實現的特效以外，難以實現的特效也在“重做”範圍內。如果設計給出的特效不在庫裡、或是排期不允許，最後都得讓設計重做。

即使前兩個需求都滿足，研發還得考慮實現效能等問題，如果實現完發現對效能要求過高，也會被打回去“重頭再來”。

從設計角度來看，並非研發給出的每個解決方案都可以接受。如果一個精心設計的動畫，被研發用另一種方式“拼湊”出來，導致效果看起來很“低階”，就脫離了設計的初衷。

因此設計往往需要和研發反覆 battle 協商，最終確定一個折中的方案，甚至在預覽階段，動畫特效也不一定就能拍板，如果臨時變更需求，研發就又得再來一遍……

這種情況下，PAG（Portable Animated Graphics）作為一套動畫工作流“橫空出世”。它包含三部分：PAG 匯出外掛（PAG Exporter）、桌面預覽工具（PAGViewer）、渲染 SDK，分別用來解決前面提到的三大研發問題。

PAG 匯出外掛

首先，設計師在 AE 中做出一段動畫後，無需再匯出成視訊或 gif 這樣的動畫效果檔案，而是能通過 PAG 匯出外掛，直接將 AE 動畫編碼匯出成一份.pag 格式的動畫檔案。

這個外掛，相當於從源頭上解決了設計與研發之間“來回返工”的問題。當設計檔案中出現系統不支援的 AE 向量特性、或使用了特別影響效能的屬性時，PAG 匯出外掛就會給出修改提示，幫助設計師匯出符合系統要求的動畫檔案。

細節上也有一些好用的地方，例如一鍵設定就能匯出 BMP 預合成、設定佔位圖填充模式等功能，進一步節省設計的時間；

由於匯出的.pag 檔案採用二進位制格式儲存動畫資訊，不僅有效降低了檔案大小，還能讓設計師們往裡面直接放各種素材資源（圖片、音訊等），交付時只用傳送一個檔案。

▲檔案格式長這樣

桌面預覽工具 PAGViewer

然後，設計師在預覽時，就能直接採用 PAGViewer 在 PC 端預覽.pag 動畫檔案的效果。這樣設計師無需等待動畫檔案上線、就能一鍵預覽移動端的動畫效果。還可以直接在 PAGViewer 裡面修改可編輯文字或佔位圖：

除了修改可編輯檔案和預覽效果，PAGViewer 還增加了效能展示面板，裡面包含了 pag 動畫的基本資訊，如時長、幀率、尺寸、bmp 預合成的數量、圖層總數等。

如下圖所示，設計師直接就能通過面板，看到量化的效能指標，來定量評估.pag 檔案的效能，並進行鍼對性優化，避免上線前才發現“效能卡設計”等問題：

渲染 SDK

最後，開發只需要一次性的渲染 SDK 接入就能載入 PAG 檔案，直接在 Android、iOS、mac OS、windows、web、Linux 等常用的平臺端準確還原動畫效果，無需進行額外開發。當然，由於 pag 檔案的可編輯性，開發自己也能直接修改或替換檔案中的文字和佔位圖，不用再在需求上麻煩設計。

一段動畫特效可以被分成‘動畫效果 + 內容’兩部分，‘可編輯性’指的是替換‘內容’部分。

以“滾動的一串文字”動畫效果為例，其中文字資訊是內容，滾動就是動畫效果。pag 可以在保留預設動畫的情況下，做到修改文字的內容，字型，字號，顏色等十幾項屬性。除了文字可以被修改替換，PAG 還提供了佔位圖的替換能力，同樣在保留預設動畫的情況下，不僅可以替換照片，甚至可以直接把視訊也放進佔點陣圖。

這樣一來，不僅避免了設計反覆根據需求修改動畫特效的痛苦，還能將動畫特效運用於視訊剪輯中。像我們在開頭看到的王者特效，包括暱稱和 KDA 其實都可以被一鍵替換，不需要再將對應的動效重新設計一遍。

▲這次是情侶組合（狗頭）

• 總結一下，PAG 最大的優勢有以下幾點：

• 輸出動畫檔案極小，比同類型方案平均降低 50%

• 支援所有 AE 效果匯出，包括第三方 AE 特效外掛

• 執行時保留動畫效果，實時編輯文字替換佔位圖

• 提供從匯出、預覽、到效能優化的完善工具鏈支援

• SDK 覆蓋所有平臺，包含 Web 以及服務端渲染能力

解決的正是當前短視訊特效設計師們最頭疼的幾大痛點。

其實在 PAG 出現之前，業內已經有一些類似的設計外掛，但或多或少存在一點問題。PAG 究竟是怎麼解決它們的？我們與 PAG 的研發團隊、騰訊 PCG 釋出器中臺下編輯子工作組的負責人 Dom 取得了聯絡，瞭解了背後的實現原理。

PAG 背後的技術門道

Dom 表示，PAG 早期最有挑戰的地方，其實就在於“動畫檔案設計”和“全 AE 特性支援”這兩部分。

高效動畫檔案

在輸出檔案格式方面，已有的 JSON 等格式存在兩大問題：解碼速度慢、壓縮率低。為此，團隊重新設計了一種名為.pag 的檔案格式，採用二進位制資料結構來儲存動畫資訊。

一方面，二進位制資料結構不需要做字串匹配、序列化等操作，解碼速度會比 JSON 等格式的檔案快上許多。測試資料顯示，在解碼速度上，PAG 格式的動畫檔案要比 JSON 檔案快 12 倍。

另一方面，相比於 JSON，二進位制資料結構具有更高的壓縮率。JSON 檔案匯出的冗餘資訊較多，而二進位制的資料結構則能跳過大量預設值儲存，並使用動態位元位來緊湊儲存。因此相同的動畫內容，PAG 檔案比同類型方案壓縮檔案小 50% 左右。

此外，採用二進位制資料結構還有一個額外的好處，在匯出動畫檔案時不用再搭配“圖片包”（外掛圖片），一個檔案就能搞定，包括音訊也能夠內建。

全 AE 特性支援

說完檔案格式，再來看看 PAG 檔案是如何做到支援所有 AE 效果的。這個特性使得 PAG 檔案既能實時預覽複雜特效，又能確保動畫的可編輯性，但在之前，它們並不能同時被實現。這是因為傳統的動畫的匯出模式有兩種，即向量匯出和序列幀匯出。

向量匯出的動畫檔案具有可編輯性，但缺點是一些複雜特效無法在移動端實時預覽，因此無法做到全 AE 特性支援。序列幀匯出基於截圖的原理解決了這個問題，也就是將複雜的視覺動效全部截成圖片，再實現匯出。但這就導致檔案大小可能高達幾十上百兆，對移動端而言“又大，又沒法編輯”。

為了讓檔案既可以編輯，又能保證精彩動態效果的實現，PAG 的研發人員們想到了混合匯出的方法。簡單來說，就是給不需要可編輯性的圖層打標記。這樣在匯出時，需要保留編輯性的圖層就會以純向量形式被匯出，而打了標記的圖層，則以序列幀的方式匯出。

值得一提的是，為了儘可能壓縮匯出檔案的大小，PAG 團隊還自己設計了 bmp 預合成的格式，充分利用了視訊的極限幀間壓縮能力，並在此基礎上擴充套件了對透明通道的支援。

再加上渲染方面的優化，最終，相比於傳統圖片序列幀，視訊序列幀格式的檔案大小可以降低到原來的 1.24% 左右。

但從基礎功能的實現，到如今成為一整套完整的工具流，PAG 並非“一蹴而就”。與之相反，雖然 SDK 去年才開始對外開放，但早在 2016 年，PAG 的第一行程式碼就已經寫下。從最初的 1.0 版本迭代到如今的形態，PAG 已經走過了 4 個版本。

“被 battle 出來的產品”

“從寫下第 1 行程式碼，到第 1 次跑通，團隊就用了 6 個月時間。”至於為何要選擇堅持打磨這樣一款工具產品，Dom 提到了一個“回憶殺”的詞語 Flash：

在 Flash 時代，動效開發有一套非常完善的工作流：設計師把動畫製作出來，匯出一個 SWF 檔案，開發人員無需手敲程式碼還原效果，直接匯入就能使用。並且動效裡面的細節是可以調整的。

但到了現在的 H5、移動應用開發裡，很少有工具能夠完整還原這套完善的動畫工作流。

他希望 PAG 能在視訊編輯這樣一個場景裡，把這套工作流帶到移動端動畫製作上，降低或者消除動畫相關的研發成本。

這個想法在市場上也很快有了案例驗證 ——

PAG 專案開始的同一年，支援將向量動畫匯出到各個平臺的 AE 外掛 Lottie 問世。這款外掛的成功問世，證明了還原 Flash 這套設計到研發之間的流暢工作流“跑得通”。

和 PAG 團隊一樣，Lottie 背後的開發者同樣有著深厚的 Flash 相關經驗，只是 Lottie 主要面向 UI 動畫設計，不太適用於短視訊場景。

為了能夠滿足短視訊貼紙動畫以及模板的開發需求，PAG 團隊選擇了繼續自研。6 個月之後，PAG 1.0 版本出爐。

騰訊的設計師們試用後，PAG 團隊得到的反饋是“存在不少問題”，核心概括起來就是：

1.0 版本雖然支援了帶動畫的文字編輯，但僅覆蓋了 AE 的純向量匯出能力，很多複雜動畫效果無法被完整還原。

為此，PAG 繼續迭代出了 2.0 版本：通過混合匯出實現 AE 全特性支援，同時解決了特效和可編輯性的問題。開發團隊還在 2.0 版本引入了佔位圖的能力，為照片模板和視訊模板的生產帶來了工業化量產的能力。

到 3.0 版本時，PAG 在編輯性上進一步探索突破，強化了圖層級別的原子編輯組合能力，支援了從原子特效元件動態構建模板，很好地支撐了遊戲戰報和一鍵出片等動態模板的需求……

這時候，PAG 功能已經相對全面，騰訊內部設計師開始“口口相傳”，將 PAG 主動推薦給外部的其他設計師使用，也因此反饋出了更多的需求。

就在本月，PAG 完成了 4.0 版本的開發，並傳出開源訊號。這個版本耗時近一年時間完成了渲染架構的重大升級，徹底脫離了谷歌的 Skia 2D 繪相簿，SDK 包體也直接下降了 60%。

具體而言，PAG 團隊自研實現了一套輕量純 GPU 繪圖引擎，通過最大化利用平臺端提供的所有能力，以 500K 左右的包體覆蓋了 Skia 的絕大部分功能，並且在介面設計上充分暴露了針對現代 GPU 渲染的優化能力。因此，包體減小的同時，渲染效能的上限實際得到了進一步的提升。

另外，PAG 4.0 版本基於這個全新的 2D 繪圖引擎，也將正式拓展對 Web 端的支援。量子位還獲悉，目前 PAG 4.0 版本已經走完騰訊開源稽核流程。

回過頭看，PAG 的不斷進化，其實也得益於騰訊內部複雜的業務需求。開發團隊與業務方的持續“battle”，使得這套動畫工作流始終貼合著設計師、工程師們最真實的“痛點”。這或許也就是為什麼，明明是一個騰訊內部工具，卻在外部因使用者們的口口相傳打出名氣，被推動著走向開放、開源。

說了這麼多，是時候附上傳送門了。如果你對 PAG 感興趣，現在就可以去官網獲取 SDK。開原始碼也正在路上，可以一起蹲一個~

官網連結：

https://pag.io/