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

一、常見動效落地方案

1. Lottie

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

2. SVGA

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

3. Apng 和 Webp

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

二、動效落地神器——PAG

1. PAG 是什么

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

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

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

2. 完善的動畫工作流

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

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

3.  性能強(qiáng)文件小

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

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

4. AE 特性全支持

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

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

再說下"BMP 預(yù)合成輸出"：

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

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

5. 目前已使用 PAG 的產(chǎn)品

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

小結(jié)

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

三、PAG 的實(shí)際應(yīng)用

1. 序列幀動畫

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

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

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

2.  禮物打賞動畫

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

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

3. 懸浮球和圖標(biāo)動畫

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

4.  匹配和彈幕漂屏動畫

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

5. Banner 動畫

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

6. 徽章動畫

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

寫在最后

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

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

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

附錄——PAG使用指南

1. 快速安裝 PAG

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

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

2. PAG 插件配置

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

通用：

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

BMP 預(yù)合成：

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

3. PAG 設(shè)計輸出方式

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

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

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

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

5. 性能檢測面板

這個功能對于設(shè)計師來說是一個很好的功能，很多設(shè)計朋友可能更多的關(guān)注的是動效的視覺效果，缺忽視了性能的問題，因?yàn)橥ǔ有涞胤桨笡]有這個功能（SVGA 可以在線查看內(nèi)存消耗），告訴你性能有問題的一般是開發(fā)拿過去測試后發(fā)現(xiàn)來告訴你的，但是性能確實(shí)還是比較重要的一個事項(xiàng)，因?yàn)樗赡軙苯佑绊懏a(chǎn)品的穩(wěn)定性，有了性能檢測面板，設(shè)計師可以提前預(yù)測到你所產(chǎn)出的動效性能是否合理，在性能面板中可以看到動畫時長、播放幀率、顯存大小、動畫尺寸等，性能面板也給出了性能的參考值，超過這個值會用紅色感嘆號提示你。

6. 快速編輯預(yù)覽動畫

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

7. 支持音頻輸出

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

小結(jié)

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

作者：Tomato76