你好，我是tiantian。

我們知道，動畫特效可以輔助視覺制作焦點，引導注意力的方向，越來越為廣大視覺設(shè)計師青睞，并廣泛應用于各類場景開發(fā)。

關(guān)于動畫設(shè)計工具，既有 Framer.js、Origami， 也有交互原型類 Principle、Flinto，還有 Figma 自帶動畫演示功能的工具，但是對于一些視覺特效、非邏輯表達類動畫，設(shè)計師通常會借助 AE 完成。

遺憾的是，AE動畫效果的開發(fā)至今也沒有一種完備且成熟的跨平臺解決方案，導致動畫需求交付上線的效率，交付質(zhì)量，視覺動效弱，生產(chǎn)周期長，研發(fā)成本高等這些方案都不盡人意，為了解決上述痛點，騰訊研發(fā)了一款動畫開發(fā)“神器”——“PAG”(Portable Animated Graphics)，日前，PAG也正式開源到了GitHub上(https://github.com/tencent/libpag)。

接下來主要從以下幾個部分介紹這款神器：

• 技術(shù)原理
• PAG存在的優(yōu)勢
• PAG使用初體驗

從上面3個部分展開，一起探索下“PAG”的好用之處。

技術(shù)原理

想要解這款神器的話，我們得從以下幾個方面來看：

為什么會有PAG

PAG作為動畫的一種解決方案，不得不提目前業(yè)界常用的動畫工作流解決方案：Lottie和SVGA。

Lottie 最早從UI動畫場景出發(fā)解決矢量動畫渲染的問題，從官方社區(qū)來看，我們能容易發(fā)現(xiàn) Lottie 的矢量基因，社區(qū)作品大多是矢量圖形類動畫。SVGA 是 YY 直播的開發(fā)工程師 2017 年發(fā)布的一套跨平臺動畫解決方案，誕生于直播場景，SVGA 不支持復雜矢量圖形動畫，對位圖動畫的支持超過 Lottie，其最初的目標是為了改善和彌補Lottie。

不可否認，兩者都是業(yè)界優(yōu)化的動畫解決方案。PAG誕生于2016年，最初的原因是為了解決更為復雜的視頻編輯場景下動畫渲染問題，同時又完美覆蓋了UI動畫和直播場景。

為什么要用PAG

傳統(tǒng)實現(xiàn)方案的工作流

首先，我們來看看傳統(tǒng)實現(xiàn)方案的整體流程：設(shè)計師需要在AE中完成動效設(shè)計，進行手工還原，最后與設(shè)計師反復確認效果。如沒有此類特效的話，需要重新開發(fā)，直到符合預期。

PAG 的工作流程

再說到PAG的工作流程，在體驗后，整個流程總結(jié)如下：

主要流程：

• 由AE生成對應動畫
• 通過AE插件，完成動畫導出部分
• 預覽圖片素材
• 導出對應文件
• 運營配置后，端上渲染

可以看到，在PAG的工作流程下，許多之前需要人工配置和手工調(diào)整的部分都簡化了，直接可以在PAG桌面預覽工具中做相應的素材替換預覽效果，查看性能面板定量評估性能，極大提高了動效研發(fā)的效率。

PAG主要優(yōu)勢介紹

PAG的主要技術(shù)優(yōu)勢主要是以下幾個方面：

• 全AE特性支持
• 支持圖層編輯
• 與視頻渲染無縫整合
• 支持服務(wù)端渲染
• 文件更小等

文件更小

PAG是二進制文件格式，采用了動態(tài)比特位編碼技術(shù)，讓相同動畫導出的文件大小平均只有 Lottie 的一半左右(都經(jīng)過zip壓縮后對比)。

解碼更快

PAG由于采用二進制格式，不存在JSON的字符串解析，解碼耗時平均只有Lottie文件的7.6%，同時二進制文件格式也更容易做到單文件集成圖片，音頻，視頻等任意資源，所以它的解碼速度比Lottie快得很多。

支持更多AE特性

PAG支持更多的AE特性，目前支持Lottie在移動端幾乎所有的功能，并且額外在文本，遮罩，濾鏡方面比Lottie支持更加全面。比如一些內(nèi)置的特效。

性能更好

PAGViewer 面板可以定性的評估PAG素材的性能，如下圖就是性能面板給到的結(jié)果：

對比不同的素材，我們從渲染耗時來看，優(yōu)化的時間都是Lottie的100%以上的，從內(nèi)存上來看，平均優(yōu)化的空間是巨大的，對于一款應用來說，提升不可小覷。

接口易維護

首先，我們從平臺上來看：

• Lottie僅支持Android、iOS、web、mac OS
• SVGA支持Android、iOS和web端
• PAG可以支持到Android、iOS、web、mac OS、windows、Linux，涵蓋到所有平臺。

PAG為很多的用戶考慮到平臺兼容性，真的下了很多功夫。當然了，除了上面的平臺兼容外，PAG 在接口設(shè)計上也更加容易去維護。 

打開官網(wǎng)，都有完備的接入文檔。

PAG使用初體驗

接下來，我會作為零基礎(chǔ)的用戶，給大家介紹下操作體驗。

PAG導出面板

以設(shè)計完成的AE動效為例，安裝好PAGViewer后，選擇安裝AE插件，即可在AE中支持導出PAG文件。

在導出PAG文件時可以看到提供了兩種方式，如下圖所示：

導出插件面板和直接導出，前者增加了導出插件面板的顯示，方便查看AE工程中直接導出存在的問題，并且有更豐富的錯誤提示以及相應的改進建議，方便設(shè)計師快速發(fā)現(xiàn)和解決問題。

同時，支持一鍵導出BMP預合成和查看占位圖層。

另外，由于pag動畫的時長是固定的，在某些場景需要pag文件的時長能夠動態(tài)變化，于是增加了時間伸縮的功能。當設(shè)置PAG的播放時長和pag文件時長不一致時，會應用時間伸縮。

由此可見，在PAG文件導出之前，就能在面板確保動效呈現(xiàn)效果，并對動效圖層做出相應的預覽和調(diào)整。用UI的方式替代復雜的手工操作，提高了設(shè)計師的生產(chǎn)效率。

并且，操作過后，界面上能夠記憶上次的選擇，避免多次重復的操作。

PAG Viewer功能

文件結(jié)構(gòu)：

打開PAG文件，可以直觀的了解文件結(jié)構(gòu)，方便直接參看圖形或參數(shù)配置。

性能檢測：

PAGViewer上的Profiler性能檢測面板可以很直觀地幫助設(shè)計師進行性能調(diào)優(yōu)。預覽貼紙時按下鍵盤上的P鍵即可呼出該面板，再次按下關(guān)閉面板。

靈活的占位圖替換和文字編輯能力，如下替換中間的占位圖片：

替換前： 替換后：

或者直接在PAG Viewer上進行文字編輯：

如下圖，在圖層編輯面板中點擊希望更改的文字區(qū)域，可以直接修改圖層文字。

總結(jié)

從體驗上來說，PAG方案的出現(xiàn)，顯著提升了動畫設(shè)計到上線的效率，解決了行業(yè)在動畫制作這塊的大量痛點問題。根據(jù)業(yè)務(wù)場景，支持多種形式視頻及動畫創(chuàng)意，廣告、游戲、視頻編輯..目前接入PAG的產(chǎn)品，比如QQ，微信，王者榮耀，QQ音樂等。

PAG 目前已正式對外開源，如果大家對改進 PAG 項目有任何的想法或建議，歡迎訪問 PAG 的 Github 主頁：https://github.com/tencent/libpag 。大家也可以加入PAG官方群(893379574)或通過他們的官網(wǎng)(https://pag.io/)，與更多優(yōu)秀的設(shè)計師和開發(fā)人員共同體驗!