在終端 APP 中，動畫非常常見，它可以輔助視覺制造焦點，同時也可以讓用戶交互更加順滑，但動畫的實現(xiàn)卻是設計師和研發(fā)群體的一個痛點。如何輔助設計師設計高性能炫酷的動畫、如何將設計師設計的動畫準確無誤的還原到終端 APP 上是業(yè)界不斷探索和解決的問題。

圖 1 傳統(tǒng)動畫實現(xiàn)流程圖

當前最好的動畫設計軟件是 Adobe After Effects（簡稱 AE），從 AE 動畫制作到終端 APP 呈現(xiàn)，傳統(tǒng)的實現(xiàn)方式如圖 1 所示，有三大痛點：實現(xiàn)成本高、溝通成本高和性能難以保證。

近幾年，業(yè)界誕生了像 Lottie、SVGA 這樣的動畫工作流解決方案，雖然在一定程度上提升了生產(chǎn)效率，但存在 AE 支持能力有限、動畫性能難以保證、配套工具支持有限的問題。

PAG 解決的問題

PAG（Portable Animated Graphics）是騰訊 PCG 發(fā)布器中臺自主研發(fā)的一套完整的動畫工作流解決方案，助力于將 AE 動畫方便快捷的應用于各平臺終端。PAG 的流程圖如圖 2 所示，設計師在 AE 上設計出動畫后，可以通過導出插件導出 pag 文件，同時 PAG 提供了桌面端預覽工具，支持實時預覽效果，在確認效果后，通過運行配置上線，各平臺終端可以通過 PAG SDK 加載渲染 pag 動畫。

圖 2 PAG 動畫工作流流程圖

與 Lottie、SVGA 相比，PAG 增加支持了服務端。除此之外，如圖 3 所示，PAG 動畫方案在導出動畫文件大小、AE 特性支持和可編輯性方面具有較大的優(yōu)勢。

圖 3 PAG 和 Lottie 對比圖

PAG 支持的 AE 特性能力

1. 矢量特性能力的支持

和 Lottie、SVGA 實現(xiàn)不同的是，PAG 不依賴平臺端渲染接口，可以實現(xiàn)各平臺的渲染一致性。PAG 與 Lottie、SVGA 的矢量能力支持如附表 1《AE 特性能力支持》所示。

2. BMP 預合成--全 AE 特性支持

無論是 PAG 還是 Lottie、SVGA，所支持的 AE 特性僅僅是 AE 眾多特性中的很少的一部分，這在一定程度上限制了設計師的創(chuàng)造力。針對這個問題，PAG 新增了 BMP 預合成的導出方式，支持導出所有 AE 特性，適用于不可編輯的場景。其原理如圖 4 所示，在合成的層面將渲染結(jié)果截取成圖片，然后進行視頻編碼。

圖 4 BMP 預合成原理圖

針對視頻不支持透明通道而動畫需要包含透明通道的問題，在編碼的層面擴展了透明通道的支持，如圖 5 所示。

圖 6 PAG 矢量和 BMP 預合成混合導出

PAG 導出插件

1. 不支持 AE 特性提示

針對導出動畫和 AE 設計動畫存在偏差的問題，PAG 導出插件增加了使用了不支持 AE 特性提醒功能，如下圖 7 所示。

圖 7 PAG 導出面板

在預覽界面，同樣有不支持特性的提示，如圖 8 所示。

圖 8 PAG 導出面板預覽窗口

在使用 AE 設計動畫的過程中，設計師可以方便快捷的提前查看使用了那些不支持直接導出的 AE 特性，換種實現(xiàn)方式或者導出成 BMP 預合成，有效的解決了設計動畫和導出動畫存在偏差的問題。

2. BMP 預合成一鍵設置

在 AE 動畫設計的過程中，PAG 導出面板提供了一鍵設置 BMP 預合成的方法，如下圖 9 所示。需要提示的是，一旦設置了 BMP 預合成，該合成中的文本和圖片將不能再被用戶編輯。

圖 9 BMP 預合成設置

由于 BMP 預合成可能會影響到可替換圖片的數(shù)量，PAG 同時會實時更新可替換圖片的數(shù)量給設計以提示。

3. 圖片填充模式設置

在用 pag 設置的素材中，經(jīng)常會遇到用戶填充的圖片與默認占位圖尺寸不一致的情況，在導出面板中 PAG 增加圖片填充的四個規(guī)則，如圖 10 所示：

圖 10 可替換圖片填充設置

其中：

不縮放：畫面不縮放，從左上角位置開始裁剪

黑邊：在保持高寬比的情況下縮放到設備的可用屏幕大小，圖像不發(fā)生變形，如果圖片尺寸和填充區(qū)域比例不一致，會出現(xiàn)黑邊，為默認填充模式

拉伸：不保持寬高比填充，會發(fā)生失變形

裁剪：在保持高寬比的情況下縮放到完全填滿可用的屏幕大小

具體效果如圖 11 所示。

圖 11 圖片填充效果圖

桌面預覽工具 PAGViewer

1. 效果預覽

PAGViewer 支持桌面端預覽 PAG 文件動畫效果，如下圖所示。支持查看動畫文件中包含有多少個可編輯文本和可編輯圖片，且支持設計師本地填充素材，實時預覽填充效果，無需等待上線后才能確認真實效果。圖片占位圖支持填充圖片或視頻，如果 PAG 文件內(nèi)置了音頻文件，支持播放音頻效果。具體效果如圖 12 所示。

圖 12 PAG 效果預覽

2. 性能檢測

在 pag 動畫實際使用的過程中，PAG 經(jīng)常遇到的問題是設計師辛辛苦苦設計的動畫在終端上性能表現(xiàn)不佳，需要進行返工優(yōu)化，同樣的問題在使用 Lottie 方案時候也會存在。

除了效果預覽，PAGViewer 還增加了性能展示面板，可以很方便的看到 pag 動畫的基本信息，如時長、幀率、尺寸、bmp 預合成的數(shù)量，圖層總數(shù)等，還有量化的性能指標，定量的評估 pag 文件的性能，如圖 13 所示，方便設計師進行針對性的優(yōu)化，而不需要等到上線前才會暴露性能問題。具體效果如圖 13 所示。

圖 13 PAG 性能展示面板

PAG 的應用場景

目前 PAG 方案已經(jīng)廣泛應用于騰訊公司內(nèi)外幾十款產(chǎn)品中，涵蓋了眾多的國民級應用。

總結(jié)下來，PAG 目前主要使用在以下幾大場景：

1. UI 動畫

圖 15 UI 動畫場景

設計師設計出動畫文件后，研發(fā)只需要替換預設的文本內(nèi)容即可，并且文件體積非常小。

2. 貼紙動畫

圖 16 貼紙動畫場景

3. 照片/視頻模板

圖 17 照片/視頻模板場景

PAG 支持將內(nèi)置的圖片作為占位圖替換，并保留所有動畫效果。因此可以將整個 PAG 動畫設計成一個模板，把預設的占位圖替換成用戶選取的照片，自動套用效果生成視頻。全程可以讓設計師自由批量生產(chǎn)模板，無需研發(fā)介入。

仍然基于圖片替換原理，PAG 也支持將占位圖替換為視頻，實現(xiàn)視頻模板功能。

4. 智能剪輯

圖 18 智能剪輯場景

智能剪輯是圍繞用戶上傳的視頻內(nèi)容，生成定制化的模板，模板本身是不固定的，可以從多個 PAG 文件組合而成，類似活字印刷。設計師可以利用這個特性，構(gòu)建自己的特效組件庫，然后對接 AI 的識別能力，根據(jù)一定規(guī)則組合得到無限數(shù)量的模板效果，可以做到一鍵出片。這塊目前的典型應用場景是王者榮耀的周戰(zhàn)報功能，隨機生成游戲高光時刻視頻。

關于 PAG 更多的信息，歡迎訪問： https://pag.io/

更多騰訊ISUX開發(fā)的神器：

歡迎關注作者微信公眾號：「騰訊ISUX」