今天給大家推薦一款未來很有可能會成為主流的動畫解決方案 —— PAG。

一、常見動效落地方案

1. Lottie

它算是市面上比較普遍的一種動效落地方式，它可以制作很多種類的矢量動畫以及圖片動畫，它的緩動曲線會占用很多內存，在各平臺效果支持上也不是特別的穩(wěn)定，而且 Lottie 所支持的 AE 屬性對設計師來說有一定的限制。

2. SVGA

與 Lottie 相比性能和穩(wěn)定性會更好一些，因為 SVGA 是通過記錄我們每個圖層每個時間上的動畫狀態(tài)，因此 SVGA 也可以輸出序列幀動畫，但是它的內存消耗會比 Lottie 高，并且 SVGA 支持的 AE 特性也比 Lottie 少一些。

3. Apng 和 Webp

這兩種動效落地方案目前在原生端可以通過一些代碼框架支持，在 Web 端 Apng 和 Webp 格式存在一定的兼容性問題，目前在主流瀏覽器上是可以支持的。

二、動效落地神器——PAG

1. PAG 是什么

PAG（Portable Animated Graphics）是騰訊自主研發(fā)的一套完整的動畫工作流解決方案，助力于將 AE 動畫方便快捷的應用于各平臺終端。

設計師在 AE 上設計出動畫后，可以通過導出插件導出 Pag 文件，同時可以在桌面端預覽工具中實時預覽效果，還可以通過桌面端進行性能檢測。PAG 可以支持 AndROId、iOS、web、mac OS、Windows 和 Linux，涵蓋了業(yè)界常用的終端平臺，支持 AE 動畫實時渲染、運行時編輯。

Lottie 和 SVGA 的設計目標是解決 UI 動畫場景，PAG 的誕生的原因是因為 Lottie 無法滿足視頻編輯場景里的動畫需求，后續(xù)又兼顧了 UI 動畫在內的各種場景。

2. 完善的動畫工作流

通常設計師輸出動效給開發(fā)都是直接 AE 導出就給開發(fā)了，很少去關注動效的性能問題，并且每次想要嘗試不同素材動畫效果時，需要在 AE 中調試輸出后在去看效果，導致設計成本浪費。

采用 PAG 進行動效設計的話，我們在 AE 中調試好輸出動效后，可以直接在 PAG 桌面端進行查看，在桌面端我們可以快速替換動效中的圖片素材或文案來查看效果，同時可以通過性能面板查看當前動效的性能，方便設計師進行針對性優(yōu)化。

3.  性能強文件小

PAG 采用了二進制的數(shù)據(jù)結構來存儲動畫信息。二進制數(shù)據(jù)結構能夠非常方便的單文件集成任何資源，在解碼速度上比 Lottie 所使用的 JSON 文本數(shù)據(jù)快幾十倍，在性能方面，PAG 的實時渲染性能平均可以達到 Lottie 的 1.5 到 2.5 倍左右。

而在文件大小上，PAG 通過利用動畫文件本身的特點，獲得了極高的壓縮率。通過跳過大量默認值的存儲，使用比特位來緊湊存儲，相同動畫內容可以比同類型方案平均減少 50% 左右的文件大小。

4. AE 特性全支持

PAG 動畫制作有兩種模式，分別為"矢量特性輸出"和"BMP 預合成輸出"，先來說下"矢量特性輸出"：

我們可以理解為用矢量素材和圖片素材通過 AE 特性進行動效制作，PAG 的 AE 特性的支持是多于 Lottie 和 SVGA 的，且基本上涵蓋了所有的 AE 特性，矢量特性輸出性能會比 BMP 預合成輸出性能更好。

再說下"BMP 預合成輸出"：

我們可以理解為序列幀動畫輸出，也就意味著通過 BMP 方式輸出我們可以使用 AE 中所有的特性，甚至是 AE 插件效果和視頻素材，雖然" BMP 預合成輸出"可以支持所有 AE 特性，但是和 SVGA 中輸出序列幀一樣，"BMP 預合成輸出"性能消耗和動效文件大小也會更大，所以大家在使用時要合理把控，PAG 支持了矢量和 BMP 預合成混合導出，從而實現(xiàn)在支持 AE 所有特性的同時，又保持運行時的可編輯性。

這里我們再把開頭的產品對比橫向加入 PAG，可以很直觀地感受到 PAG 相比其他產品的優(yōu)勢所在：

5. 目前已使用 PAG 的產品

下面這些產品中都應用到了 PAG 這款動效落地方案，包括我們非常熟悉的微信、QQ、王者、騰訊視頻等。

小結

目前市面上的動效解決方案各有優(yōu)劣，Apng 的出現(xiàn)感覺確實很棒，它解決了我們在其他動效方案中所遇見的問題，讓設計效率得到了提升，但如果是 PAG，則可以通過" BMP 預合成導出"方式一鍵導出，你不需要再去把一些特殊效果進行序列幀輸出導入的過程，PAG 會幫你輸出這些特殊效果，并做壓縮和優(yōu)化。

三、PAG 的實際應用

1. 序列幀動畫

目前 3D 類動畫是一個流行的趨勢，通常我們都采用的 AE 來制作一些 UI 中的視覺動畫效果。

如果我們要制作一些特別的效果，比如用三維軟件制作一些 3D 的交互視覺動畫，以 C4D 為例，我們可以將制作好的 C4D 動畫導出為序列幀，放進 AE 中以" BMP 預合成輸出"我們就可以得到一個三維效果的交互視覺動畫，而且 PAG 輸出的序列幀動畫相比 SVGA 性能優(yōu)化的更好。

用過 SVGA 的同學，一定嘗試過序列幀來輸出動效，通過序列幀雖然能給我們帶來更炫的視覺效果，同時它也會帶來更大的文件體積和顯存效果，通過下圖同一序列幀動畫文件輸出對比：PAG 顯存消耗比 SVGA 小 40 倍，PAG 文件大小比 SVGA 小 2 倍，相比 SVGA 序列幀輸出，顯然 PAG 在序列幀輸出的優(yōu)化上做的更好。

2.  禮物打賞動畫

禮物打賞類動畫是比較社交類產品中最常見的視覺動畫，禮物動畫比較注重整體的氛圍感和視覺效果，因此會用到 AE 第三方插件、腳本等豐富畫面視覺效果。

以 SVGA 為例，通常一些特殊視覺效果需要我們做進行序列幀的方式處理，采用 PAG 輸出我們可以在需要輸出的預合成名字后面加"_bmp"，通過" BMP 預合成輸出"直接導出動畫，PAG 會幫你輸出這些特殊效果，并做壓縮和優(yōu)化，提升動畫輸出效率。

3. 懸浮球和圖標動畫

懸浮球運營位也是產品中運營活動的引流入口，將懸浮球采用動態(tài)化的設計，可以提升趣味性和視覺吸引力，圖標動畫也是非常常見的動畫表現(xiàn)形式，比如：Tab bar 圖標，禮物打賞圖標等。

4.  匹配和彈幕漂屏動畫

PAG 也可以制作匹配和飄屏類動畫效果，設計師將動畫輸出給開發(fā)，開發(fā)可以調用相應方法替換動畫中的的圖層文件和文本內容，比如：用戶匹配成功時的用戶頭像和名字，以及彈幕飄屏中的用戶頭像、頭像框和用戶名字等。

5. Banner 動畫

Banner 類運營動畫，相信大家肯定看到過支付寶一些運營 Banner 動畫，類似這樣的動畫我們也可以使用 PAG 進行設計制作后輸出給運營的同事進行后臺配置，相比靜態(tài) Banner，動態(tài) Banner 更加具有趣味性，動態(tài)元素更吸引用戶注意。

6. 徽章動畫

徽章動畫是社交類產品中很常見的視覺動畫，使用動態(tài)形式表現(xiàn)徽章能更好的體現(xiàn)出尊貴感，在 PAG 中我們可以直接通過軌道遮罩制作掃光效果會簡單很多，同時 PAG 還支持 AE 混合模式，我們可以通過混合模式制作一些圖層效果。

寫在最后

其實我很早就關注 PAG 這個動畫解決方案了，PAG 出來沒多久我就去嘗試使用了，算是 PAG 比較早的一批用戶吧，目前來看 PAG 相比目前市面上的動畫解決方案來說確實很不錯，無論從 AE 的特性支持，以及序列幀動畫輸出的壓縮和優(yōu)化都比市面上的其他解決方案更好，自動檢測動效文件錯誤這個功能，對于經驗不豐富的設計師來說很有幫助。

PAG 會在輸出時告知你動效文件可能存在的一些問題，性能檢測可以讓設計師可以提前預判動畫所存在的性能風險，從而對動畫進行合理的調整，避免因動效性能導致的產品穩(wěn)定性問題，目前 PAG 團隊還在持續(xù)迭代優(yōu)化中，期待后續(xù)更多優(yōu)秀的功能出現(xiàn)。

PAG 原生端和 Web 端 1 月 14 日正式開源，目前可以下載使用，對 PAG 感興趣的設計師朋友，可以去官網： https://pag.io 了解更多信息。

附錄——PAG使用指南

1. 快速安裝 PAG

以 MacOS 系統(tǒng)為例，PAG 的安裝個人認為對新手用戶是非常友好的，整個安裝的過程跟著提示確認就行，相比其他的動畫方案安裝要簡單很多。

1. 在官網下載 PAG 安裝包；
2. 安裝 PAGViewer 軟件；
3. 打開 PAGViewer，PAGViewer 將自動檢測是否需要安裝/更新 AE 導出插件，按提示安裝即可（記得安裝前先關閉 AE）
4. 如果沒有自動檢測提示安裝點擊菜單欄 "PAGViewer" -> "安裝 AE 插件"

2. PAG 插件配置

在"After Effects CC" -> "首選項" -> "PAGConfig..."可以打開 PAG 配置面板，配置面板中分為"通用"和" BMP 預合成"。 "通用"可以理解為使用 PAG 所支持的 AE 特性制作的動效輸出，" BMP 預合成"則是在動效中采用了特殊效果比如AE 插件或腳本制作的特效。

通用：

1. 導出場景：設計師可以根據(jù)使用場景進行設置，我通常用的"通用"模式
2. 導出版本控制：這里有三個選項，stable：穩(wěn)定版，表示導出穩(wěn)定版本的 PAG 文件，這類 PAG 文件通?？梢员痪€上已經發(fā)布的 app 支持。發(fā)布到線上的 PAG 常用此選項。beta：最新版，表示導出最新版本的 PAG 文件，這類 PAG 文件可能無法被線上已經發(fā)布的 app 支持。測試 PAG 新特性時常用此選項。custom：自定義導出為指定的 SDK 版本能支持的能力，需搭配 TagLevel 使用，具體 TagLevel 的值可以從指定版本 SDK 里的 PAGFile.MaxSupportedTagLevel() 獲取。
3. TAG Level：只有當導出版本控制選項取值為 custom 時，TAGLevel 欄才有效，否則無法輸入。取值范圍為 44 至 1023.具體設置到什么值可以咨詢客戶端開發(fā)人員，通常根據(jù)線上客戶端 SDK 所支持的最大 TagLevel 確定。
4. 位圖壓縮質量：用來控制位圖和 BMP 預合成的壓縮質量，取值范圍（0-100），越高圖片越清晰但是文件越大，默認 80。
5. 位圖像素密度：用于控制位圖在文件中存儲的最大像素密度
6. 導出圖層名字：這個功能默認打開就行
7. 導出字體：打開后將會導出動畫中使用字體的字體包
8. 單獨調節(jié)圖像尺寸：打開后如果導出的素材中包含圖片或 BMP 預合成，AE 導出插件將在導出過程中彈出"素材壓縮面板"，設計師可以對不同的素材圖片進行單獨的壓縮

BMP 預合成：

1. BMP 預合成后綴：在需要輸出的預合成后面加入后綴名后，將會以" BMP 預合成"形式輸出，默認后綴是"_bmp"，不分大小寫，大家也可以自定義一個后綴。
2. 圖像質量：用來控制位圖和 BMP 預合成的壓縮質量，取值范圍（0-100），越高圖片越清晰但是文件越大，默認 80。
3. 導出尺寸上限：用于控制導出 BMP 預合成的最大分辨率（短邊）。過大可能會顯著增加 PAG 文件尺寸；過小會影響播放的清晰度。默認 720
4. 關鍵幀間隔：用于控制導出 BMP 預合成的關鍵幀間距。取 0 表示只有第一幀為關鍵幀；其它正數(shù)表示關鍵幀間距，默認 60，關鍵幀間距影響播放 seek 時的解碼效率。取值過小會增大導出的 PAG 文件尺寸
5. 導出版本列表：導出 BMP 預合成時允許單個文件包含多個分辨率版本的截圖序列，程序在實際使用時會動態(tài)使用最合適的分辨率以降低性能損耗。配置此列表能控制具體要導出哪些分辨率和幀率的截圖序列版本，可以通過"增加版本"/"刪除選中"來增減列表
6. 存儲格式：可選"視頻序列幀"和"位圖序列幀"兩種導出的存儲格式，視頻存儲格式會更小，在含有硬件解碼的平臺上性能也更好。位圖存儲格式文件更大，在只有軟件解碼的平臺上或者非常小的尺寸時比視頻解碼略微更快。默認值是 "視頻序列幀"

3. PAG 設計輸出方式

PAG 輸出動畫有兩種模式"矢量預合成輸出"和" BMP 預合成輸出"。

"矢量預合成輸出"就是通過矢量圖形和位圖素材利用 PAG 所支持的 AE 特性制作的動效，這種模式輸出的優(yōu)勢在于性能好文件體積小，同時可以在桌面端編輯圖片預覽不同素材下的動畫效果，缺點是無法使用一些特殊效果，比如 AE 的第三方插件 " BMP 預合成輸出"就是序列幀的輸出形式，因此可以支持 AE 中所有的特殊效果包括第三方插件和腳本效果等，但它的缺點是性能差文件體積大，同時無法在桌面端編輯替換素材。

4. 自動檢測動效文件錯誤

這是非常貼心的一個設計，在輸出 PAG 動效時，插件會自動檢測當前動效中出現(xiàn)的一些問題，提前告知設計師當前動效存在的一些風險，以便設計師即使做出調整，比如：位圖數(shù)量太多、圖層數(shù)量太多等，之前有不少設計朋友問過我 SVGA 輸出時不知道出了什么問題，在 PAG 中插件會自動檢測提示你可能出現(xiàn)的問題。

5. 性能檢測面板

這個功能對于設計師來說是一個很好的功能，很多設計朋友可能更多的關注的是動效的視覺效果，缺忽視了性能的問題，因為通常動效落地方案沒有這個功能（SVGA 可以在線查看內存消耗），告訴你性能有問題的一般是開發(fā)拿過去測試后發(fā)現(xiàn)來告訴你的，但是性能確實還是比較重要的一個事項，因為它可能會直接影響產品的穩(wěn)定性，有了性能檢測面板，設計師可以提前預測到你所產出的動效性能是否合理，在性能面板中可以看到動畫時長、播放幀率、顯存大小、動畫尺寸等，性能面板也給出了性能的參考值，超過這個值會用紅色感嘆號提示你。

6. 快速編輯預覽動畫

這個功能適用于"矢量預合成輸出"的動效，" BMP 預合成輸出"不支持圖片編輯，設計師可以在文本編輯區(qū)編輯文本信息，在圖片編輯區(qū)直接替換當前動效中所使用的位圖素材，可以快速驗證不同位圖素材和文本信息的效果，不用在到 AE 里在去折騰了提升設計效率。

7. 支持音頻輸出

PAG 是可以支持音頻輸出的，這對于禮物動畫設計的設計師來說是好事，通常需求方都希望比較貴的禮物能帶一些 BGM 更有氛圍，采用 PAG 的話就可以制作一些帶音效的禮物啦，可以在桌面端 PAG 文件結構：getRootLayer：PreComposeLayer -> composition:VectorComposition -> audioBytes 的值，來判斷 Pag 文件中音頻輸入是否導出成功，為 {} 時導出成功，為 null 時導出失敗或無音頻。

小結

PAG 無論是安裝還是 AE 特性支持的都要優(yōu)于現(xiàn)有的動畫方案，兩種輸出方式可以根據(jù)動畫效果進行合理選擇。自動檢測和性能檢測能讓設計師提前預測可能出現(xiàn)的錯誤，快速編輯預覽幫我們快速嘗試不同素材的效果，提高設計效率；支持音頻輸出對禮物設計來說是件好事。 關于 PAG 的使用介紹我這里只做一些簡要的概述，更詳細的使用說明大家可以在 PAG 官網中進行查看

作者：Tomato76