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