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

魚羊 蕭簫 發(fā)自 凹非寺

量子位 報道 | 公眾號 QbitAI

給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 After Effects）設(shè)計出一段動畫效果，導(dǎo)出動畫效果文件（gif或視頻Demo）并交給研發(fā)；然后，研發(fā)們嘗試用代碼還原動畫，渲染出我們在移動端看到的效果。

但實際上，設(shè)計和研發(fā)的（一整周）工作流程是這樣的：

雙方battle的問題包括且不限于：

從研發(fā)角度來看，并非設(shè)計給出的所有特效都能在手機上實現(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è)置占位圖填充模式等功能，進一步節(jié)省設(shè)計的時間；

由于導(dǎo)出的.pag文件采用二進制格式存儲動畫信息，不僅有效降低了文件大小，還能讓設(shè)計師們往里面直接放各種素材資源（圖片、音頻等），交付時只用發(fā)送一個文件。

△文件格式長這樣

桌面預(yù)覽工具PAGViewer

然后，設(shè)計師在預(yù)覽時，就能直接采用PAGViewer在PC端預(yù)覽.pag動畫文件的效果。這樣設(shè)計師無需等待動畫文件上線、就能一鍵預(yù)覽移動端的動畫效果。

還可以直接在PAGViewer里面修改可編輯文本或占位圖：

除了修改可編輯文件和預(yù)覽效果，PAGViewer還增加了性能展示面板，里面包含了pag動畫的基本信息，如時長、幀率、尺寸、bmp預(yù)合成的數(shù)量、圖層總數(shù)等。

如下圖所示，設(shè)計師直接就能通過面板，看到量化的性能指標(biāo)，來定量評估.pag文件的性能，并進行針對性優(yōu)化，避免上線前才發(fā)現(xiàn)“性能卡設(shè)計”等問題：

渲染SDK

最后，開發(fā)只需要一次性的渲染SDK接入就能加載PAG文件，直接在Android、iOS、mac OS、windows、web、Linux等常用的平臺端準(zhǔn)確還原動畫效果，無需進行額外開發(fā)。

當(dāng)然，由于pag文件的可編輯性，開發(fā)自己也能直接修改或替換文件中的文本和占位圖，不用再在需求上麻煩設(shè)計。

一段動畫特效可以被分成“動畫效果+內(nèi)容”兩部分，“可編輯性”指的是替換“內(nèi)容”部分。

以“滾動的一串文本”動畫效果為例，其中文本信息是內(nèi)容，滾動就是動畫效果。pag可以在保留預(yù)設(shè)動畫的情況下，做到修改文本的內(nèi)容，字體，字號，顏色等十幾項屬性。

除了文本可以被修改替換，PAG還提供了占位圖的替換能力，同樣在保留預(yù)設(shè)動畫的情況下，不僅可以替換照片，甚至可以直接把視頻也放進占位圖。

這樣一來，不僅避免了設(shè)計反復(fù)根據(jù)需求修改動畫特效的痛苦，還能將動畫特效運用于視頻剪輯中。

像我們在開頭看到的王者特效，包括昵稱和KDA其實都可以被一鍵替換，不需要再將對應(yīng)的動效重新設(shè)計一遍。

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

總結(jié)一下，PAG最大的優(yōu)勢有以下幾點：

• 輸出動畫文件極小，比同類型方案平均降低50%
• 支持所有AE效果導(dǎo)出，包括第三方AE特效插件
• 運行時保留動畫效果，實時編輯文本替換占位圖
• 提供從導(dǎo)出、預(yù)覽、到性能優(yōu)化的完善工具鏈支持
• SDK覆蓋所有平臺，包含Web以及服務(wù)端渲染能力

解決的正是當(dāng)前短視頻特效設(shè)計師們最頭疼的幾大痛點。

其實在PAG出現(xiàn)之前，業(yè)內(nèi)已經(jīng)有一些類似的設(shè)計插件，但或多或少存在一點問題。

PAG究竟是怎么解決它們的？

我們與PAG的研發(fā)團隊、騰訊PCG發(fā)布器中臺下編輯子工作組的負(fù)責(zé)人Dom取得了聯(lián)系，了解了背后的實現(xiàn)原理。

PAG背后的技術(shù)門道

Dom表示，PAG早期最有挑戰(zhàn)的地方，其實就在于“動畫文件設(shè)計”和“全AE特性支持”這兩部分。

高效動畫文件

在輸出文件格式方面，已有的JSON等格式存在兩大問題：解碼速度慢、壓縮率低。

為此，團隊重新設(shè)計了一種名為.pag的文件格式，采用二進制數(shù)據(jù)結(jié)構(gòu)來存儲動畫信息。

一方面，二進制數(shù)據(jù)結(jié)構(gòu)不需要做字符串匹配、序列化等操作，解碼速度會比JSON等格式的文件快上許多。測試數(shù)據(jù)顯示，在解碼速度上，PAG格式的動畫文件要比JSON文件快12倍。

另一方面，相比于JSON，二進制數(shù)據(jù)結(jié)構(gòu)具有更高的壓縮率。

JSON文件導(dǎo)出的冗余信息較多，而二進制的數(shù)據(jù)結(jié)構(gòu)則能跳過大量默認(rèn)值存儲，并使用動態(tài)比特位來緊湊存儲。因此相同的動畫內(nèi)容，PAG文件比同類型方案壓縮文件小50%左右。

此外，采用二進制數(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團隊還自己設(shè)計了bmp預(yù)合成的格式，充分利用了視頻的極限幀間壓縮能力，并在此基礎(chǔ)上擴展了對透明通道的支持。

再加上渲染方面的優(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次跑通，團隊就用了6個月時間。”

至于為何要選擇堅持打磨這樣一款工具產(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團隊一樣，Lottie背后的開發(fā)者同樣有著深厚的Flash相關(guān)經(jīng)驗，只是Lottie主要面向UI動畫設(shè)計，不太適用于短視頻場景。

為了能夠滿足短視頻貼紙動畫以及模板的開發(fā)需求，PAG團隊選擇了繼續(xù)自研。

6個月之后，PAG 1.0版本出爐。

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

1.0版本雖然支持了帶動畫的文本編輯，但僅覆蓋了AE的純矢量導(dǎo)出能力，很多復(fù)雜動畫效果無法被完整還原。

為此，PAG繼續(xù)迭代出了2.0版本：通過混合導(dǎo)出實現(xiàn)AE全特性支持，同時解決了特效和可編輯性的問題。開發(fā)團隊還在 2.0版本引入了占位圖的能力，為照片模板和視頻模板的生產(chǎn)帶來了工業(yè)化量產(chǎn)的能力。

到3.0版本時，PAG在編輯性上進一步探索突破，強化了圖層級別的原子編輯組合能力，支持了從原子特效組件動態(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團隊自研實現(xiàn)了一套輕量純GPU繪圖引擎，通過最大化利用平臺端提供的所有能力，以500K左右的包體覆蓋了Skia的絕大部分功能，并且在接口設(shè)計上充分暴露了針對現(xiàn)代GPU渲染的優(yōu)化能力。因此，包體減小的同時，渲染性能的上限實際得到了進一步的提升。

另外，PAG 4.0版本基于這個全新的2D繪圖引擎，也將正式拓展對Web端的支持。

量子位還獲悉，目前PAG 4.0版本已經(jīng)走完騰訊開源審核流程。

回過頭看，PAG的不斷進化，其實也得益于騰訊內(nèi)部復(fù)雜的業(yè)務(wù)需求。開發(fā)團隊與業(yè)務(wù)方的持續(xù)“battle”，使得這套動畫工作流始終貼合著設(shè)計師、工程師們最真實的“痛點”。

這或許也就是為什么，明明是一個騰訊內(nèi)部工具，卻在外部因使用者們的口口相傳打出名氣，被推動著走向開放、開源。

說了這么多，是時候附上傳送門了。

如果你對PAG感興趣，現(xiàn)在就可以去官網(wǎng)獲取SDK。

開源代碼也正在路上，可以一起蹲一個~

官網(wǎng)鏈接：
https://pag.io/

— 完 —