編輯導(dǎo)讀：網(wǎng)絡(luò)上關(guān)于SVGA的討論大多數(shù)都只是在軟件上的問(wèn)題，具體實(shí)踐案例很少。本文作者依據(jù)工作中項(xiàng)目實(shí)踐的所思所想，結(jié)合案例等分享了SVGA動(dòng)效落地使用過(guò)程中非常有價(jià)值的設(shè)計(jì)知識(shí)，并對(duì)過(guò)程存在的問(wèn)題進(jìn)行了盤(pán)點(diǎn)，供大家一同參考和學(xué)習(xí)。

接近年底，工作繁多，缺失精力，所以停更了一段時(shí)間。但正是因?yàn)橥度氲焦ぷ鳟?dāng)中，去解決棘手的問(wèn)題，反而可以學(xué)習(xí)到很多新東西。今天我就來(lái)分享一下我的項(xiàng)目碰壁經(jīng)歷與總結(jié)。熱騰騰、新鮮出爐的一線(xiàn)干貨~

一、案例背景：為什么棄Lottie投SVGA

耍家任職于一家電商產(chǎn)品公司。雙十一大促近在眼前，我們想通過(guò)大量的動(dòng)效來(lái)營(yíng)造平臺(tái)的活動(dòng)氛圍。

因?yàn)榻┠闘ottie的風(fēng)行，前端動(dòng)效落地的成本比以前低了許多，不論是動(dòng)畫(huà)視覺(jué)效果、前端事件綁定、動(dòng)效文件大小控制等等方面，Lottie讓UI設(shè)計(jì)師在動(dòng)效上的發(fā)揮空間得到了進(jìn)一步的擴(kuò)展。我們團(tuán)隊(duì)之前實(shí)施動(dòng)效落地，也是一直采用的Lottie方案。（我之前也總結(jié)過(guò)Lottie的一些入門(mén)事項(xiàng)，可移步《了解圖標(biāo)規(guī)范，用Lottie動(dòng)畫(huà)讓圖標(biāo)落地》）

但這次想達(dá)到的動(dòng)效效果和之前的不太相同。這一次因?yàn)殛P(guān)系到雙十一大促活動(dòng)，我們想讓動(dòng)效風(fēng)格更加夸張、驚喜。導(dǎo)致我們?cè)谶\(yùn)用Lottie的過(guò)程中，遇到了諸多問(wèn)題。

后來(lái)經(jīng)過(guò)各方面的請(qǐng)教與調(diào)研，這次我們準(zhǔn)備轉(zhuǎn)戰(zhàn)SVGA方案。

網(wǎng)絡(luò)上關(guān)于SVGA的資料不少，但大多數(shù)不涉及到真實(shí)項(xiàng)目場(chǎng)景的細(xì)節(jié)還原。所以我準(zhǔn)備分享實(shí)例，好好講一講我為什么最終選擇SVGA，以及如何執(zhí)行、如何解決在這個(gè)過(guò)程中遇到的問(wèn)題的。

這都是我本人一步一個(gè)坑踩出來(lái)的經(jīng)驗(yàn)！希望能夠幫助到你。

二、辛路歷程

這次我們?cè)贚ottie上遭遇碰壁，原因是因?yàn)長(zhǎng)ottie矢量動(dòng)畫(huà)不支持部分AE直出的樣式效果，導(dǎo)致我們必須考慮以序列幀的方式去實(shí)現(xiàn)動(dòng)畫(huà)。

我們?cè)贏E中制作好的成果，導(dǎo)出json后在本地解析預(yù)覽，效果不盡人意。到各端真機(jī)上演示還會(huì)再損失掉更多的樣式效果。（原因是因?yàn)?strong>Lottie在不同環(huán)境中所支持的AE參數(shù)有所差異）

以津貼紅包動(dòng)效為例。為了給用戶(hù)帶來(lái)紅包的驚喜、喜慶氛圍，前期我構(gòu)思的動(dòng)效是希望盡量帶有沖擊感。擬3D的效果可以讓紅包的出現(xiàn)看上去更加真實(shí)，并且在紅包飛出過(guò)程中使用了發(fā)光效果。

前期我們?yōu)榱吮苊庾哌M(jìn)「序列幀動(dòng)畫(huà)」的胡同，基于我們團(tuán)隊(duì)在Lottie方面所具備的經(jīng)驗(yàn)，我們希望盡量通過(guò)Lottie所支持的AE屬性來(lái)實(shí)現(xiàn)矢量動(dòng)畫(huà)，這樣在文件大小、性能上都能夠得到把控。

例如，我們知道Lottie是不支持AE效果器所直接填加的效果的。于是對(duì)于發(fā)光效果，我們并沒(méi)有直接采用「效果-發(fā)光」去實(shí)現(xiàn)，而是通過(guò)「高斯模糊+內(nèi)發(fā)光+投影」的方式，從視覺(jué)上去模擬發(fā)光。也期許這樣簡(jiǎn)單的圖層樣式，能夠被Lottie解析。

但通過(guò)Bodymovin導(dǎo)出json后進(jìn)行本地預(yù)覽，出現(xiàn)了這樣的狀況：內(nèi)發(fā)光、投影效果和高斯模糊都丟失了。效果非常生硬?

甚至到了真機(jī)演示上，3D效果竟然也丟失了。完全沒(méi)法投入落地使用。

為了兼容所有的樣式效果，我們最終只好將動(dòng)效輸出為序列幀，通過(guò)Lottie去一幀一幀播放（還是踏上了這條路…）。最終這樣的方式導(dǎo)致Lottie輸出后，包內(nèi)所包含的img位圖文件總量達(dá)到了數(shù)兆之多…

為了找到一個(gè)不管從視覺(jué)效果還是文件大小上都能主動(dòng)把控的技術(shù)方案。于是我盯上了SVGA。

三、SVGA初體驗(yàn)

在此我就不再做過(guò)多的SVGA背景說(shuō)明了，網(wǎng)上一查一大堆。我盯上SVGA的原因是因?yàn)?，許多直播禮物的浮夸動(dòng)效都是用序列幀+svga方案落地的，應(yīng)該符合我們這次的項(xiàng)目要求。

通過(guò)最初的探索發(fā)現(xiàn)，SVGA和Lottie其實(shí)很類(lèi)似。你可以直接制作矢量動(dòng)畫(huà)輸出svga文件，當(dāng)然，SVGA也有它所不支持的AE屬性。你也可以通過(guò)序列幀去輸出svga文件，這一點(diǎn)和Lottie就有所差異了。

熟悉Lottie的朋友應(yīng)該知道，當(dāng)動(dòng)效中包含位圖元素時(shí)，Lottie會(huì)生成兩個(gè)文件：一個(gè)json代碼文件+一個(gè)img文件夾，這也是為什么我之前用Lottie去做序列幀時(shí)，整個(gè)文件包的大小達(dá)到了幾兆之多的原因，大部分都是因?yàn)橐粡堃粡埖膱D片堆積起來(lái)的。

而通過(guò)SVGA，只會(huì)生成一個(gè)svga后綴文件，代碼和位圖元素都被集成在了一起。

第一次接觸SVGA的我，掉進(jìn)了慣性思維的陷阱。無(wú)腦地以為SVGA就是專(zhuān)門(mén)為做序列幀動(dòng)畫(huà)而誕生的。所以直接上手把整個(gè)動(dòng)畫(huà)合成都導(dǎo)出成了序列幀動(dòng)畫(huà)。最后輸出的文件依然超超超級(jí)大…

一定是我哪里出了什么問(wèn)題…于是我開(kāi)始了漫漫探索優(yōu)化的道路。

四、走起來(lái)了！走起來(lái)了！

雖然無(wú)可避免地走上了「序列幀動(dòng)畫(huà)」這條路，但為了優(yōu)化動(dòng)畫(huà)文件大小，我們開(kāi)始思考，如何盡可能地減少序列幀的幀數(shù)。讓序列幀動(dòng)畫(huà)盡量少，讓矢量動(dòng)畫(huà)盡量多。

最終我們決定將紅包動(dòng)畫(huà)拆分為兩個(gè)部分：「紅包飛出部分」+「等待開(kāi)啟部分」。

因?yàn)椤傅却_(kāi)啟部分」所涉及到的動(dòng)效參數(shù)，都比較基礎(chǔ)，縮放、旋轉(zhuǎn)、透明度這類(lèi)基礎(chǔ)屬性，是SVGA矢量動(dòng)畫(huà)肯定能夠解析的。所以對(duì)于這一部分我們把元素全部進(jìn)行了拆解，最后輸出的矢量動(dòng)畫(huà)文件，只有幾十k。

而「紅包飛出部分」，我將作為本次講解的案例，分享給大家。講一講我的操作與實(shí)現(xiàn)過(guò)程需要注意的事項(xiàng)。

步驟一：制作動(dòng)效并導(dǎo)出序列幀

制作動(dòng)效的部分，是屬于AE使用范疇的內(nèi)容了，我在此不做過(guò)多贅述。做好動(dòng)效后，把合成添加至渲染序列，然后選擇導(dǎo)出為序列幀。

步驟二：壓縮序列幀文件并導(dǎo)入

從這一步開(kāi)始，你就要做好思考如何優(yōu)化svga文件大小的準(zhǔn)備了。導(dǎo)入序列幀之前，務(wù)必先對(duì)所有的序列幀文件進(jìn)行壓縮（或者你的動(dòng)效文件中有位圖元素，也務(wù)必先對(duì)位圖進(jìn)行壓縮）。元素文件大小將關(guān)乎你最終svga文件的大小。

SVGA和Lottie不一樣的地方就在于，SVGA是將位圖集成在svga文件當(dāng)中的，而Lottie則是把json和位圖分離開(kāi)。Lottie可以在導(dǎo)出后，再對(duì)位圖進(jìn)行文件大小優(yōu)化；而SVGA最好是在事先就對(duì)位圖進(jìn)行大小優(yōu)化。我一般使用tinypng來(lái)壓縮位圖。

在項(xiàng)目面板中「右鍵-導(dǎo)入-文件」，選擇序列幀文件夾。

步驟三：制作序列幀動(dòng)畫(huà)并導(dǎo)出

五、該如何優(yōu)化svga大小

我?guī)缀醢丫W(wǎng)上流傳的各種優(yōu)化svga文件大小的方式都試了個(gè)遍。

最終我發(fā)現(xiàn)，對(duì)SVGA序列幀幀動(dòng)畫(huà)大小影響最關(guān)鍵要素始終都是位圖文件的大小。任何方式的最終落腳點(diǎn)，都是在直接或間接地優(yōu)化位圖文件。

方法一：控制文件尺寸

尺寸越大文件越大，即使是alpha通道中的透明像素，也會(huì)影響位圖文件的最終大小。所以控制動(dòng)畫(huà)素材文件的尺寸，是優(yōu)化svga文件大小的方式之一。

如果動(dòng)畫(huà)的展示不需要全屏，盡量縮小動(dòng)畫(huà)區(qū)域。如果動(dòng)畫(huà)展示是全屏，建議尺寸可設(shè)置為680*1209，基本可以滿(mǎn)足所有分辨率的移動(dòng)設(shè)備。

這里提出一個(gè)避坑點(diǎn)：「控制尺寸」是指在制作動(dòng)畫(huà)時(shí)，就需要對(duì)畫(huà)板尺寸進(jìn)行控制。而不是二次導(dǎo)入序列幀后，再去改變合成的尺寸。在這個(gè)時(shí)候改變合成尺寸，約等于只是在改變動(dòng)畫(huà)的可視區(qū)域，對(duì)最后導(dǎo)出的svga文件并沒(méi)有影響。

舉個(gè)例子：序列幀的原尺寸為400px*400px，原本輸出的svga動(dòng)畫(huà)大小為90k。在保持序列幀尺寸不變的情況下，經(jīng)過(guò)我的實(shí)驗(yàn)，就算我在二次序列幀合成中改變合成的尺寸為1px*1px，輸出的svga動(dòng)畫(huà)大小依舊會(huì)是90k！只是動(dòng)畫(huà)的可視區(qū)域變成了1px*1px。原因是因?yàn)椋瑢?shí)際上svga文件中包含的源位圖文件是一樣的。只有在制作動(dòng)畫(huà)時(shí)，導(dǎo)出300px*300px的序列幀，才能夠真正優(yōu)化到svga文件哦！

方法二：降低幀率

相信大多數(shù)人喜歡用24fps或30fps制作動(dòng)畫(huà)，也就是每1秒鐘的動(dòng)畫(huà)，將會(huì)產(chǎn)生24張或30張序列幀文件。

經(jīng)過(guò)其他同行的驗(yàn)證，說(shuō)14fps其實(shí)也基本可以滿(mǎn)足動(dòng)畫(huà)的視覺(jué)要求。也就是說(shuō)，同樣為1秒的動(dòng)畫(huà)，只會(huì)產(chǎn)生14張序列幀文件。從源頭上減少位圖文件數(shù)量。

但我自己有做嘗試，14fps對(duì)于我們項(xiàng)目所需要的動(dòng)畫(huà)來(lái)說(shuō)會(huì)稍顯卡頓，所以最終選擇了放棄。

具體的動(dòng)畫(huà)要具體分析，其實(shí)也不妨可以嘗試15-20fps之間的幀率，來(lái)尋找動(dòng)畫(huà)效果與文件大小的平衡。

方法三：手動(dòng)抽幀

和降低幀率的原理一樣，「手動(dòng)抽幀」也是從源頭上減少位圖數(shù)量。

我查資料的時(shí)候發(fā)現(xiàn)有同行使用過(guò)「每隔一幀抽一幀」、「每隔兩幀抽一幀」、「每隔三幀抽兩幀」的方式，我為了保證動(dòng)畫(huà)的連貫性，最終還是選用的「每隔一幀抽一幀」的方式。

?這里有一個(gè)躲坑點(diǎn)：因?yàn)橐话阄覀冏鲆粋€(gè)動(dòng)畫(huà)，時(shí)長(zhǎng)是提前明確的，抽幀之后會(huì)導(dǎo)致動(dòng)畫(huà)時(shí)長(zhǎng)縮短（例如「每隔一幀抽一幀」會(huì)導(dǎo)致動(dòng)畫(huà)時(shí)長(zhǎng)縮為之前的1/2）。所以為了保證動(dòng)畫(huà)時(shí)長(zhǎng)不變，我們抽幀之后要手動(dòng)降低幀率。

舉個(gè)例子：因?yàn)椤?strong>總幀數(shù)=幀率*時(shí)長(zhǎng)」，在一個(gè)幀率為24fps的合成中，1s的動(dòng)畫(huà)，就會(huì)有24張序列幀文件。我們選擇「每隔一幀抽一幀」的方式，保留了12張序列幀文件。在時(shí)長(zhǎng)1s不變的前提下，我們需要用12fps幀率來(lái)重新新建一個(gè)合成導(dǎo)出svga文件。

方法四：降低分辨率

其實(shí)說(shuō)到這里，大家也該悟到了，想控制svga的大小，其實(shí)就是在想方設(shè)法控制位圖文件的總大小。

通常我做動(dòng)畫(huà)，都是在@2x下制作位圖元素。但如果前面的方式都嘗試了之后，發(fā)現(xiàn)你的svga文件還是過(guò)大，你還可以選擇在@1x下制作素材。缺點(diǎn)是在高分辨率設(shè)備上的畫(huà)質(zhì)會(huì)有所降低。

以上所有方法都要視具體動(dòng)畫(huà)，具體分析，篩選最為合理的優(yōu)化方式。當(dāng)然你還可以探索其他各種方式來(lái)進(jìn)行svga大小的優(yōu)化，只要記住宗旨是：減小位圖文件總大小，一定還有其他更多的方式。也歡迎交流！

#專(zhuān)欄作家#

UCD耍家，公眾號(hào)：UCD耍家（ID：ucdplayer），人人都是產(chǎn)品經(jīng)理專(zhuān)欄作家。

本文由 @UCD耍家 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議