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

一、常見動(dòng)效落地方案

1. Lottie

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

2. SVGA

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

3. Apng 和 Webp

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

二、動(dòng)效落地神器——PAG

1. PAG 是什么

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

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

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

2. 完善的動(dòng)畫工作流

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

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

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

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

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

4. AE 特性全支持

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

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

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

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

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

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

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

小結(jié)

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

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

1. 序列幀動(dòng)畫

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

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

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

2.? 禮物打賞動(dòng)畫

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

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

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

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

4.? 匹配和彈幕漂屏動(dòng)畫

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

5. Banner 動(dòng)畫

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

6. 徽章動(dòng)畫

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

寫在最后

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

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

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

附錄——PAG使用指南

1. 快速安裝 PAG

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

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

2. PAG 插件配置

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

通用：

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

BMP 預(yù)合成：

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

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

PAG 輸出動(dòng)畫有兩種模式“矢量預(yù)合成輸出”和“ BMP 預(yù)合成輸出”。

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

4. 自動(dòng)檢測動(dòng)效文件錯(cuò)誤

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

5. 性能檢測面板

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

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

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

7. 支持音頻輸出

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

小結(jié)

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