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

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

1. Lottie

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

2. SVGA

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

3. Apng 和 Webp

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

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

1. PAG 是什么

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

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

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

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

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

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

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

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

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

4. AE 特性全支持

PAG 動(dòng)畫(huà)制作有兩種模式，分別為"矢量特性輸出"和"BMP 預(yù)合成輸出"，先來(lái)說(shuō)下"矢量特性輸出"：

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

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

我們可以理解為序列幀動(dòng)畫(huà)輸出，也就意味著通過(guò) 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í)的可編輯性。

這里我們?cè)侔验_(kāi)頭的產(chǎn)品對(duì)比橫向加入 PAG，可以很直觀(guān)地感受到 PAG 相比其他產(chǎn)品的優(yōu)勢(shì)所在：

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

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

小結(jié)

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

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

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

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

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

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

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

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

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

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

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

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

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

5. Banner 動(dòng)畫(huà)

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

6. 徽章動(dòng)畫(huà)

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

寫(xiě)在最后

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

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

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

附錄——PAG使用指南

1. 快速安裝 PAG

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

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

2. PAG 插件配置

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

通用：

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

BMP 預(yù)合成：

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

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

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

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

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

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

5. 性能檢測(cè)面板

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

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

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

7. 支持音頻輸出

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

小結(jié)

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

作者：Tomato76