給1分鐘的王者“擊殺”合集做一系列炫酷動畫，並集成到客戶端的一鍵戰報生成功能中，需要多長時間？就像這樣，帶“開黑局”專屬的轉場動畫，英雄昵稱KDA一應俱全：
能在每段“高光”操作出現時，加上一段文字動效渲染氣氛：
還可以在出現“三殺”等極限操作的時候，配合英雄來一把炸場效果：
對於特效設計師和客戶端的開發人員們而言，從設計完成到研發還原效果上線的時間原本應該在一周以上：
畢竟設計師不光要在AE里搞定特效設計，還得跟研發人員反覆確認代碼的效果還原度。
碰上特效太複雜、動畫文件太大等情況，免不了又是一場辦公室battle……
這種掉頭髮傷感情的事，早已讓程序員們坐不住了。
這不，他們乾脆搞出了一套自動化工具，用上它最快4小時就可以交付上線一個動畫。
而最近，這個由騰訊PCG發布器中台開發，名為PAG（Portable Animated Graphics）的工具傳出“即將對外開源”的消息，更是直接在動畫設計師和研發圈子裡點燃了一把火。
畢竟，官方郵箱里早已塞滿來自外部的SDK申請和開源許願貼。
所以，PAG到底是怎麼一回事，能讓研發和設計師們如此躍躍欲試？
PAG是什麼？
簡單來說，PAG是一套完整的動畫工作流。
在PAG出現之前，理想的移動端動畫製作流程是這樣的：
設計師們先用AE（Adobe Effect）設計出一段動畫效果，導齣動畫效果文件（gif或視頻Demo）並交給研發；然後，研發們嘗試用代碼還原動畫，渲染出我們在移動端看到的效果。
但實際上，設計和研發的（一整周）工作流程是這樣的：
雙方battle的問題包括且不限於：
從研發角度來看，並非設計給出的所有特效都能在手機上實現。
如果系統不支持特效實現方式，即使它非常酷炫狂拽，用戶也無法體驗。例如，某個交互特效在Android和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版本的開發，並傳出開源信號。這個版本耗時近一年時間完成了渲染架構的重大升級，徹底脫離了Google的Skia 2D繪圖庫，SDK包體也直接下降了60%。
具體而言，PAG團隊自研實現了一套輕量純GPU繪圖引擎，通過最大化利用平台端提供的所有能力，以500K左右的包體覆蓋了Skia的絕大部分功能，並且在接口設計上充分暴露了針對現代GPU渲染的優化能力。因此，包體減小的同時，渲染性能的上限實際得到了進一步的提升。
另外，PAG 4.0版本基於這個全新的2D繪圖引擎，也將正式拓展對Web端的支持。
量子位還獲悉，目前PAG 4.0版本已經走完騰訊開源審核流程。
回過頭看，PAG的不斷進化，其實也得益於騰訊內部複雜的業務需求。開發團隊與業務方的持續“battle”，使得這套動畫工作流始終貼合著設計師、工程師們最真實的“痛點”。
這或許也就是為什麼，明明是一個騰訊內部工具，卻在外部因使用者們的口口相傳打出名氣，被推動着走向開放、開源。
說了這麼多，是時候附上傳送門了。
如果你對PAG感興趣，現在就可以去官網獲取SDK。
開源代碼也正在路上，可以一起蹲一個~
官網鏈接：
https://pag.io/