這篇會(huì)介紹PAG動(dòng)效落地方案

首先我們看下動(dòng)效輸出常用的幾種方案的使用痛點(diǎn)

svg動(dòng)畫（.xml）

矢量圖形動(dòng)畫 文件體積小

部分常用屬性不支持，比如圓角，遮罩遥诉，導(dǎo)致有時(shí)候會(huì)需要通過塌陷形狀路徑拇泣，或者手k動(dòng)畫去達(dá)到想要的效果，輸出工作量大矮锈；有時(shí)候還需要去修改xml文件代碼霉翔，還原設(shè)計(jì)效果；

（具體可參考我的另一篇文章《SVG動(dòng)畫(.xml)資源輸出常見問題》）

Lottie（.json）

矢量圖形位圖均支持

但不支持插件特效等復(fù)雜動(dòng)畫

序列幀(.png)

文件數(shù)量多苞笨，體積大

有時(shí)候需要通過降低幀率债朵，壓縮圖片體積來滿足體積要求；大部分場景無法支持這么大體量的動(dòng)畫方案

視頻（.mp4）

文件體積不像序列幀那么大瀑凝，但也不算行蚵；

不支持alpha通道

PAG

解決目前輸出方案的部分痛點(diǎn)

導(dǎo)出涵蓋全部AE動(dòng)畫效果

在性能內(nèi)存等方面優(yōu)于其他輸出方案

接下來將會(huì)從PAG是什么粤咪，怎么選擇使用哪種輸出方案谚中，怎么使用PAG三個(gè)維度分享

image.png

是什么

1. PAG工作流程

image.png

跟目前使用的幾種輸出方式類似，動(dòng)效設(shè)計(jì)完成后寥枝，通過PAG提供的AE導(dǎo)出插件PAGExporter宪塔，導(dǎo)出一個(gè)pag二進(jìn)制文件，通過官方提供的桌面預(yù)覽工具PAGViewer囊拜，檢查動(dòng)畫是否有問題蝌麸，如沒有問題，直接輸出給開發(fā)即可艾疟，開發(fā)通過接入PAG的sdk直接渲染該文件

2. PAG特有能力

image.png

支持全部AE特性｜由于矢量導(dǎo)出僅支持部分常用的動(dòng)畫屬性效果蔽莱，為了滿足更多更復(fù)雜的動(dòng)畫效果，引入了bmp渲染能力戚长，以支持全部AE特性

3. PAG渲染方式

image.png

01 矢量預(yù)合成導(dǎo)出
這個(gè)矢量導(dǎo)出盗冷，并不僅指我們認(rèn)知的矢量圖形，使用位圖做的屬性動(dòng)畫同廉，只要是矢量導(dǎo)出支持的AE特性仪糖，這部分導(dǎo)出方式稱為矢量導(dǎo)出方式；

文件體積小,性能優(yōu)于BPM導(dǎo)出

支持圖層編輯能力

僅支持部分AE特性

image.png

image.png

image.png

詳細(xì)可參見PAG官網(wǎng)
https://pag.art/docs/ae-support.html

02 BMP預(yù)合成導(dǎo)出

BMP導(dǎo)出方式迫肖，通俗解釋就是序列幀合成锅劝；其原理是將AE特效渲染成圖片序列幀，進(jìn)而導(dǎo)出成視頻蟆湖；一個(gè)BMP預(yù)合成就相當(dāng)于一個(gè)視頻

支持所有AE動(dòng)畫效果

性能和內(nèi)存相比矢量導(dǎo)出方式更大

不支持圖層編輯能力

03 矢量和BMP混合導(dǎo)出

部分不支持的效果通過標(biāo)記成BMP預(yù)合成導(dǎo)出故爵，其余支持的效果正常矢量導(dǎo)出

支持AE全特性

圖層編輯能力

image.png

總結(jié)下三種渲染方式的優(yōu)劣勢(shì)

image.png

OK 上面我們介紹了在設(shè)計(jì)師層面能做的事情 下面我們?cè)倭私庀麻_發(fā)層面能控制什么

這里協(xié)同了開發(fā)同事做了三輪測試

image.png

01 對(duì)資源本身的控制

支持代碼動(dòng)態(tài)修改PAG文件矢量圖形的相關(guān)屬性

矢量文字｜支持-顏色，透明度隅津，描邊粗細(xì)诬垂；

矢量圖形｜不支持劲室，沒法像SVG那樣，去識(shí)別到每個(gè)矢量元素的屬性

但確實(shí)有修改矢量圖形動(dòng)畫顏色的需求结窘，官方也提供了另一種取巧辦法：

設(shè)計(jì)上-建一個(gè)純色圖層很洋，把矢量圖形的動(dòng)畫效果遮罩去擦出這個(gè)純色圖層

開發(fā)上-通過純色圖層顏色接口（PAGSolidLayer.color）來修改純色圖層的顏色

image.png

給PAG動(dòng)畫設(shè)置基礎(chǔ)屬性

View動(dòng)畫支持的屬性都可以；如平移, 縮放, 旋轉(zhuǎn), 透明度

支持設(shè)置無限循環(huán)或者固定次數(shù)

是否支持倒放隧枫？

沒有倒放接口喉磁，但可以自由控制PAG播放進(jìn)度；針對(duì)BMP預(yù)合成的PAG文件不建議倒放悠垛，會(huì)有性能問題线定；更好的方案是設(shè)計(jì)師這邊來輸出一個(gè)倒放后的素材

image.png

02 對(duì)播放進(jìn)度的控制

支持只播放PAG文件的某個(gè)區(qū)間或者調(diào)整播放速度

03 對(duì)資源添加額外的屬性

是否可以對(duì)pag文件做屬性動(dòng)畫？
比如一邊播放PAG動(dòng)畫确买，一邊通過代碼做平移/縮放等屬性動(dòng)畫

結(jié)論：可行

是否可以將PAG的播放進(jìn)度斤讥、速度與其他參數(shù)綁定？

比如滑動(dòng)一個(gè)控件湾趾，往前滑芭商，動(dòng)畫往前播，往后滑搀缠，動(dòng)畫往回播铛楣；

結(jié)論：可行，可以逐幀控制動(dòng)畫艺普，向前運(yùn)動(dòng)則播放進(jìn)度-1簸州，向后進(jìn)度+1

上面我們了解了PAG是什么 支持什么能力 那當(dāng)我們實(shí)際工作中應(yīng)該如何選擇呢 什么情況使用哪種動(dòng)效輸出方案？

下面總結(jié)了下PAG的優(yōu)勢(shì)和劣勢(shì)

**PAG優(yōu)勢(shì)

內(nèi)存性能功耗方面有一定的優(yōu)勢(shì)

image.png

PAG劣勢(shì)

image.png

PAG方案SDK體積大歧譬，這個(gè)可能會(huì)是系統(tǒng)模塊接入使用PAG會(huì)考慮的點(diǎn)岸浑，不過如果模塊使用了比如多個(gè)PAG動(dòng)畫，算起來PAG帶來的文件體積減量和SDK體積增量加起來瑰步，更小性能更優(yōu)的話矢洲，那引入PAG還是比較有優(yōu)勢(shì)的；

了解了這么多缩焦，我們?cè)趯?shí)際工作中應(yīng)該怎么選擇使用哪種格式輸出?

以下為個(gè)人總結(jié) 僅供參考读虏，可以從四個(gè)方面去判斷

1. 開發(fā)是否能接入PAG

2. 設(shè)計(jì)層面 判斷哪種格式能滿足動(dòng)效需求

3. 開發(fā)層面 對(duì)輸出效果是否有特殊需求

4. 性能方面哪種更具優(yōu)勢(shì)

   
   
   image.png

輸出建議

矢量導(dǎo)出

1. 建議優(yōu)先使用矢量圖形設(shè)計(jì)，盡可能不使用圖片素材袁滥；

因?yàn)閳D片素材用的太多盖桥，可能會(huì)出現(xiàn)內(nèi)存泄漏情況；圖片素材占用內(nèi)存相比矢量圖片要大题翻，且矢量圖形是可以無損放大的葱轩，在不同分辨率上可以使用同一套資源；

BMP預(yù)合成導(dǎo)出

盡量不用：通常只有在矢量導(dǎo)出效果無法滿足時(shí)，才使用BMP預(yù)合成
盡量少用：如果有多個(gè)圖層和預(yù)合成需要使用BMP預(yù)合成靴拱，盡量將它們合并垃喊，以減少BMP預(yù)合成的數(shù)目
控制面積：盡可能避免巨大面積的預(yù)合成標(biāo)記為 BMP 預(yù)合成導(dǎo)出，只拆解必要的動(dòng)畫區(qū)域出來標(biāo)記為 BMP 預(yù)合成導(dǎo)出袜炕。

盡量減少圖層數(shù)量

如果存在內(nèi)容完全相同的圖層本谜，應(yīng)該避免直接復(fù)制圖層，而是將這些圖層做成預(yù)合成偎窘，然后引用預(yù)合成的方式乌助，這樣圖層數(shù)量會(huì)只計(jì)算一份。

如果使用的是位圖素材陌知，盡量把可以合并的圖層合并成一個(gè)位圖素材

圖層（Layler）越多他托，繪制需要的計(jì)算量也越復(fù)雜

原文地址 https://zhuanlan.zhihu.com/p/601273786