王者QQ微信都在用的動畫神器要開源了：把交付時間縮短90%

魚羊 蕭簫 發自 凹非寺

量子位 報道 | 公眾號 QbitAI

給1分鐘的王者“擊殺”合集做一系列炫酷動畫，并集成到客戶端的一鍵戰報生成功能中，需要多長時間？

就像這樣，帶“開黑局”專屬的轉場動畫，英雄昵稱KDA一應俱全：

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

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

對于特效設計師和客戶端的開發人員們而言，從設計完成到研發還原效果上線的時間原本應該在一周以上：

畢竟設計師不光要在AE里搞定特效設計，還得跟研發人員反復確認代碼的效果還原度。

碰上特效太復雜、動畫文件太大等情況，免不了又是一場辦公室battle……

這種掉頭發傷感情的事，早已讓程序員們坐不住了。

這不，他們干脆搞出了一套自動化工具，用上它最快4小時就可以交付上線一個動畫。

而最近，這個由騰訊PCG發布器中臺開發，名為PAG?（Portable Animated Graphics）的工具傳出“即將對外開源”的消息，更是直接在動畫設計師和研發圈子里點燃了一把火。

畢竟，官方郵箱里早已塞滿來自外部的SDK申請和開源許愿貼。

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

PAG是什么？

簡單來說，PAG是一套完整的動畫工作流。

在PAG出現之前，理想的移動端動畫制作流程是這樣的：

設計師們先用AE（Adobe After Effects）設計出一段動畫效果，導出動畫效果文件（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個月時間?！?/p>

至于為何要選擇堅持打磨這樣一款工具產品，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/

— 完 —