給 1 分鐘的王者“擊殺”合集做一系列炫酷動畫，并集成到客戶端的一鍵戰(zhàn)報生成功能中，需要多長時間？就像這樣，帶“開黑局”專屬的轉(zhuǎn)場動畫，英雄昵稱 KDA 一應(yīng)俱全：
能在每段“高光”操作出現(xiàn)時，加上一段文字動效渲染氣氛：
還可以在出現(xiàn)“三殺”等極限操作的時候，配合英雄來一把炸場效果：
對于特效設(shè)計師和客戶端的開發(fā)人員們而言，從設(shè)計完成到研發(fā)還原效果上線的時間原本應(yīng)該在一周以上：畢竟設(shè)計師不光要在 AE 里搞定特效設(shè)計，還得跟研發(fā)人員反復(fù)確認(rèn)代碼的效果還原度。碰上特效太復(fù)雜、動畫文件太大等情況，免不了又是一場辦公室 battle……
這種掉頭發(fā)傷感情的事，早已讓程序員們坐不住了。這不，他們干脆搞出了一套自動化工具，用上它最快 4 小時就可以交付上線一個動畫。
而最近，這個由騰訊 PCG 發(fā)布器中臺開發(fā)，名為 PAG （Portable Animated Graphics）的工具傳出“即將對外開源”的消息，更是直接在動畫設(shè)計師和研發(fā)圈子里點燃了一把火。畢竟，官方郵箱里早已塞滿來自外部的 SDK 申請和開源許愿貼。
所以，PAG 到底是怎么一回事，能讓研發(fā)和設(shè)計師們?nèi)绱塑S躍欲試？
PAG 是什么？
簡單來說，PAG 是一套完整的動畫工作流。在 PAG 出現(xiàn)之前，理想的移動端動畫制作流程是這樣的：設(shè)計師們先用 AE（Adobe Effect）設(shè)計出一段動畫效果，導(dǎo)出動畫效果文件（gif 或視頻 Demo）并交給研發(fā)；然后，研發(fā)們嘗試用代碼還原動畫，渲染出我們在移動端看到的效果。
但實際上，設(shè)計和研發(fā)的（一整周）工作流程是這樣的：
雙方 battle 的問題包括且不限于：從研發(fā)角度來看，并非設(shè)計給出的所有特效都能在手機(jī)上實現(xiàn)。
如果系統(tǒng)不支持特效實現(xiàn)方式，即使它非?？犰趴褡?，用戶也無法體驗。例如，某個交互特效在安卓和 iOS 上都無法實現(xiàn)，研發(fā)就可能把它打回給設(shè)計“重做”。除了無法實現(xiàn)的特效以外，難以實現(xiàn)的特效也在“重做”范圍內(nèi)。如果設(shè)計給出的特效不在庫里、或是排期不允許，最后都得讓設(shè)計重做。
即使前兩個需求都滿足，研發(fā)還得考慮實現(xiàn)性能等問題，如果實現(xiàn)完發(fā)現(xiàn)對性能要求過高，也會被打回去“重頭再來”。
從設(shè)計角度來看，并非研發(fā)給出的每個解決方案都可以接受。如果一個精心設(shè)計的動畫，被研發(fā)用另一種方式“拼湊”出來，導(dǎo)致效果看起來很“低級”，就脫離了設(shè)計的初衷。
因此設(shè)計往往需要和研發(fā)反復(fù) battle 協(xié)商，最終確定一個折中的方案，甚至在預(yù)覽階段，動畫特效也不一定就能拍板，如果臨時變更需求，研發(fā)就又得再來一遍……
這種情況下，PAG（Portable Animated Graphics）作為一套動畫工作流“橫空出世”。它包含三部分：PAG 導(dǎo)出插件（PAG Exporter）、桌面預(yù)覽工具（PAGViewer）、渲染 SDK，分別用來解決前面提到的三大研發(fā)問題。
PAG 導(dǎo)出插件
首先，設(shè)計師在 AE 中做出一段動畫后，無需再導(dǎo)出成視頻或 gif 這樣的動畫效果文件，而是能通過 PAG 導(dǎo)出插件，直接將 AE 動畫編碼導(dǎo)出成一份.pag 格式的動畫文件。
這個插件，相當(dāng)于從源頭上解決了設(shè)計與研發(fā)之間“來回返工”的問題。當(dāng)設(shè)計文件中出現(xiàn)系統(tǒng)不支持的 AE 矢量特性、或使用了特別影響性能的屬性時，PAG 導(dǎo)出插件就會給出修改提示，幫助設(shè)計師導(dǎo)出符合系統(tǒng)要求的動畫文件。
細(xì)節(jié)上也有一些好用的地方，例如一鍵設(shè)置就能導(dǎo)出 BMP 預(yù)合成、設(shè)置占位圖填充模式等功能，進(jìn)一步節(jié)省設(shè)計的時間；
由于導(dǎo)出的.pag 文件采用二進(jìn)制格式存儲動畫信息，不僅有效降低了文件大小，還能讓設(shè)計師們往里面直接放各種素材資源（圖片、音頻等），交付時只用發(fā)送一個文件。
▲ 文件格式長這樣
桌面預(yù)覽工具 PAGViewer
然后，設(shè)計師在預(yù)覽時，就能直接采用 PAGViewer 在 PC 端預(yù)覽.pag 動畫文件的效果。這樣設(shè)計師無需等待動畫文件上線、就能一鍵預(yù)覽移動端的動畫效果。還可以直接在 PAGViewer 里面修改可編輯文本或占位圖：
除了修改可編輯文件和預(yù)覽效果，PAGViewer 還增加了性能展示面板，里面包含了 pag 動畫的基本信息，如時長、幀率、尺寸、bmp 預(yù)合成的數(shù)量、圖層總數(shù)等。
如下圖所示，設(shè)計師直接就能通過面板，看到量化的性能指標(biāo)，來定量評估.pag 文件的性能，并進(jìn)行針對性優(yōu)化，避免上線前才發(fā)現(xiàn)“性能卡設(shè)計”等問題：
渲染 SDK
最后，開發(fā)只需要一次性的渲染 SDK 接入就能加載 PAG 文件，直接在 Android、iOS、mac OS、windows、web、Linux 等常用的平臺端準(zhǔn)確還原動畫效果，無需進(jìn)行額外開發(fā)。當(dāng)然，由于 pag 文件的可編輯性，開發(fā)自己也能直接修改或替換文件中的文本和占位圖，不用再在需求上麻煩設(shè)計。
一段動畫特效可以被分成‘動畫效果 + 內(nèi)容’兩部分，‘可編輯性’指的是替換‘內(nèi)容’部分。
以“滾動的一串文本”動畫效果為例，其中文本信息是內(nèi)容，滾動就是動畫效果。pag 可以在保留預(yù)設(shè)動畫的情況下，做到修改文本的內(nèi)容，字體，字號，顏色等十幾項屬性。除了文本可以被修改替換，PAG 還提供了占位圖的替換能力，同樣在保留預(yù)設(shè)動畫的情況下，不僅可以替換照片，甚至可以直接把視頻也放進(jìn)占位圖。
這樣一來，不僅避免了設(shè)計反復(fù)根據(jù)需求修改動畫特效的痛苦，還能將動畫特效運(yùn)用于視頻剪輯中。像我們在開頭看到的王者特效，包括昵稱和 KDA 其實都可以被一鍵替換，不需要再將對應(yīng)的動效重新設(shè)計一遍。
▲ 這次是情侶組合（狗頭）
總結(jié)一下，PAG 最大的優(yōu)勢有以下幾點：
輸出動畫文件極小，比同類型方案平均降低 50%
支持所有 AE 效果導(dǎo)出，包括第三方 AE 特效插件
運(yùn)行時保留動畫效果，實時編輯文本替換占位圖
提供從導(dǎo)出、預(yù)覽、到性能優(yōu)化的完善工具鏈支持
SDK 覆蓋所有平臺，包含 Web 以及服務(wù)端渲染能力
解決的正是當(dāng)前短視頻特效設(shè)計師們最頭疼的幾大痛點。
其實在 PAG 出現(xiàn)之前，業(yè)內(nèi)已經(jīng)有一些類似的設(shè)計插件，但或多或少存在一點問題。PAG 究竟是怎么解決它們的？我們與 PAG 的研發(fā)團(tuán)隊、騰訊 PCG 發(fā)布器中臺下編輯子工作組的負(fù)責(zé)人 Dom 取得了聯(lián)系，了解了背后的實現(xiàn)原理。
PAG 背后的技術(shù)門道
Dom 表示，PAG 早期最有挑戰(zhàn)的地方，其實就在于“動畫文件設(shè)計”和“全 AE 特性支持”這兩部分。
高效動畫文件
在輸出文件格式方面，已有的 JSON 等格式存在兩大問題：解碼速度慢、壓縮率低。為此，團(tuán)隊重新設(shè)計了一種名為.pag 的文件格式，采用二進(jìn)制數(shù)據(jù)結(jié)構(gòu)來存儲動畫信息。
一方面，二進(jìn)制數(shù)據(jù)結(jié)構(gòu)不需要做字符串匹配、序列化等操作，解碼速度會比 JSON 等格式的文件快上許多。測試數(shù)據(jù)顯示，在解碼速度上，PAG 格式的動畫文件要比 JSON 文件快 12 倍。
另一方面，相比于 JSON，二進(jìn)制數(shù)據(jù)結(jié)構(gòu)具有更高的壓縮率。JSON 文件導(dǎo)出的冗余信息較多，而二進(jìn)制的數(shù)據(jù)結(jié)構(gòu)則能跳過大量默認(rèn)值存儲，并使用動態(tài)比特位來緊湊存儲。因此相同的動畫內(nèi)容，PAG 文件比同類型方案壓縮文件小 50% 左右。
此外，采用二進(jìn)制數(shù)據(jù)結(jié)構(gòu)還有一個額外的好處，在導(dǎo)出動畫文件時不用再搭配“圖片包”（外掛圖片），一個文件就能搞定，包括音頻也能夠內(nèi)置。
全 AE 特性支持
說完文件格式，再來看看 PAG 文件是如何做到支持所有 AE 效果的。這個特性使得 PAG 文件既能實時預(yù)覽復(fù)雜特效，又能確保動畫的可編輯性，但在之前，它們并不能同時被實現(xiàn)。這是因為傳統(tǒng)的動畫的導(dǎo)出模式有兩種，即矢量導(dǎo)出和序列幀導(dǎo)出。
矢量導(dǎo)出的動畫文件具有可編輯性，但缺點是一些復(fù)雜特效無法在移動端實時預(yù)覽，因此無法做到全 AE 特性支持。序列幀導(dǎo)出基于截圖的原理解決了這個問題，也就是將復(fù)雜的視覺動效全部截成圖片，再實現(xiàn)導(dǎo)出。但這就導(dǎo)致文件大小可能高達(dá)幾十上百兆，對移動端而言“又大，又沒法編輯”。
為了讓文件既可以編輯，又能保證精彩動態(tài)效果的實現(xiàn)，PAG 的研發(fā)人員們想到了混合導(dǎo)出的方法。簡單來說，就是給不需要可編輯性的圖層打標(biāo)記。這樣在導(dǎo)出時，需要保留編輯性的圖層就會以純矢量形式被導(dǎo)出，而打了標(biāo)記的圖層，則以序列幀的方式導(dǎo)出。
值得一提的是，為了盡可能壓縮導(dǎo)出文件的大小，PAG 團(tuán)隊還自己設(shè)計了 bmp 預(yù)合成的格式，充分利用了視頻的極限幀間壓縮能力，并在此基礎(chǔ)上擴(kuò)展了對透明通道的支持。
再加上渲染方面的優(yōu)化，最終，相比于傳統(tǒng)圖片序列幀，視頻序列幀格式的文件大小可以降低到原來的 1.24% 左右。
但從基礎(chǔ)功能的實現(xiàn)，到如今成為一整套完整的工具流，PAG 并非“一蹴而就”。與之相反，雖然 SDK 去年才開始對外開放，但早在 2016 年，PAG 的第一行代碼就已經(jīng)寫下。從最初的 1.0 版本迭代到如今的形態(tài)，PAG 已經(jīng)走過了 4 個版本。
“被 battle 出來的產(chǎn)品”
“從寫下第 1 行代碼，到第 1 次跑通，團(tuán)隊就用了 6 個月時間?！敝劣跒楹我x擇堅持打磨這樣一款工具產(chǎn)品，Dom 提到了一個“回憶殺”的詞語 Flash：
在 Flash 時代，動效開發(fā)有一套非常完善的工作流：設(shè)計師把動畫制作出來，導(dǎo)出一個 SWF 文件，開發(fā)人員無需手敲代碼還原效果，直接導(dǎo)入就能使用。并且動效里面的細(xì)節(jié)是可以調(diào)整的。
但到了現(xiàn)在的 H5、移動應(yīng)用開發(fā)里，很少有工具能夠完整還原這套完善的動畫工作流。
他希望 PAG 能在視頻編輯這樣一個場景里，把這套工作流帶到移動端動畫制作上，降低或者消除動畫相關(guān)的研發(fā)成本。
這個想法在市場上也很快有了案例驗證 ——
PAG 項目開始的同一年，支持將矢量動畫導(dǎo)出到各個平臺的 AE 插件 Lottie 問世。這款插件的成功問世，證明了還原 Flash 這套設(shè)計到研發(fā)之間的流暢工作流“跑得通”。
和 PAG 團(tuán)隊一樣，Lottie 背后的開發(fā)者同樣有著深厚的 Flash 相關(guān)經(jīng)驗，只是 Lottie 主要面向 UI 動畫設(shè)計，不太適用于短視頻場景。
為了能夠滿足短視頻貼紙動畫以及模板的開發(fā)需求，PAG 團(tuán)隊選擇了繼續(xù)自研。6 個月之后，PAG 1.0 版本出爐。
騰訊的設(shè)計師們試用后，PAG 團(tuán)隊得到的反饋是“存在不少問題”，核心概括起來就是：
1.0 版本雖然支持了帶動畫的文本編輯，但僅覆蓋了 AE 的純矢量導(dǎo)出能力，很多復(fù)雜動畫效果無法被完整還原。
為此，PAG 繼續(xù)迭代出了 2.0 版本：通過混合導(dǎo)出實現(xiàn) AE 全特性支持，同時解決了特效和可編輯性的問題。開發(fā)團(tuán)隊還在 2.0 版本引入了占位圖的能力，為照片模板和視頻模板的生產(chǎn)帶來了工業(yè)化量產(chǎn)的能力。
到 3.0 版本時，PAG 在編輯性上進(jìn)一步探索突破，強(qiáng)化了圖層級別的原子編輯組合能力，支持了從原子特效組件動態(tài)構(gòu)建模板，很好地支撐了游戲戰(zhàn)報和一鍵出片等動態(tài)模板的需求……
這時候，PAG 功能已經(jīng)相對全面，騰訊內(nèi)部設(shè)計師開始“口口相傳”，將 PAG 主動推薦給外部的其他設(shè)計師使用，也因此反饋出了更多的需求。
就在本月，PAG 完成了 4.0 版本的開發(fā)，并傳出開源信號。這個版本耗時近一年時間完成了渲染架構(gòu)的重大升級，徹底脫離了谷歌的 Skia 2D 繪圖庫，SDK 包體也直接下降了 60%。
具體而言，PAG 團(tuán)隊自研實現(xiàn)了一套輕量純 GPU 繪圖引擎，通過最大化利用平臺端提供的所有能力，以 500K 左右的包體覆蓋了 Skia 的絕大部分功能，并且在接口設(shè)計上充分暴露了針對現(xiàn)代 GPU 渲染的優(yōu)化能力。因此，包體減小的同時，渲染性能的上限實際得到了進(jìn)一步的提升。
另外，PAG 4.0 版本基于這個全新的 2D 繪圖引擎，也將正式拓展對 Web 端的支持。量子位還獲悉，目前 PAG 4.0 版本已經(jīng)走完騰訊開源審核流程。
回過頭看，PAG 的不斷進(jìn)化，其實也得益于騰訊內(nèi)部復(fù)雜的業(yè)務(wù)需求。開發(fā)團(tuán)隊與業(yè)務(wù)方的持續(xù)“battle”，使得這套動畫工作流始終貼合著設(shè)計師、工程師們最真實的“痛點”。這或許也就是為什么，明明是一個騰訊內(nèi)部工具，卻在外部因使用者們的口口相傳打出名氣，被推動著走向開放、開源。
說了這么多，是時候附上傳送門了。如果你對 PAG 感興趣，現(xiàn)在就可以去官網(wǎng)獲取 SDK。開源代碼也正在路上，可以一起蹲一個~
官網(wǎng)鏈接：
https://pag.io/
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。