首先想說下為啥要寫這篇文章，最近接到個(gè)項(xiàng)目任務(wù)制作直播間禮物贈(zèng)送視覺效果，由于之前沒有接觸過此類設(shè)計(jì)，因此在多方打聽，并在網(wǎng)上到處探索后發(fā)現(xiàn)SVGA是個(gè)不錯(cuò)的選擇，在與開發(fā)同學(xué)溝通并嘗試了另外幾種格式輸出文件后，我們最終敲定了用SVGA。

 

在網(wǎng)上搜索了很多相關(guān)資料學(xué)習(xí)，發(fā)現(xiàn)網(wǎng)上關(guān)于SVGA的資料相當(dāng)少，而且很大部分還是介紹關(guān)于開發(fā)的，關(guān)于設(shè)計(jì)制作的少的可憐，這也是我打算寫這篇內(nèi)容的的原因，我覺得或許應(yīng)該有這么一篇文章，幫助到一些正在做這個(gè)事兒的設(shè)計(jì)同學(xué)，如果有什么表達(dá)有問題的地方歡迎大家指正…

 

 

禮物動(dòng)效輸出方法

 

 

    A：導(dǎo)出關(guān)鍵幀動(dòng)畫制作禮物動(dòng)效

缺點(diǎn)：需要把圖片帶到安裝包中，增大了安裝包體積

    B：使用屬性動(dòng)畫

缺點(diǎn)：開發(fā)代價(jià)較大，每一套禮物動(dòng)畫基本都不一樣，開發(fā)人員需要去細(xì)細(xì)調(diào)參，花在業(yè)務(wù)上編碼的時(shí)間會(huì)變得非常有限，從代碼復(fù)用率極低

    C：輸出GIF文件

缺點(diǎn)：輸出效果差，并且資源占用高

    D：使用SVGA，SVGA支持位圖，并且輸出后直接封裝打包好的，直接給開發(fā)SVGA文件就OK，并且SVGA更貼合直播類應(yīng)該場景，SVGA所提供的動(dòng)態(tài)文本、動(dòng)態(tài)圖像功能都是其它庫所不能提供的，在實(shí)現(xiàn)炫酷動(dòng)畫的基礎(chǔ)上，性能表現(xiàn)也比較棒。

SVGA是開源工具可以跨平臺(tái)使用，支持Android、iOS、React Native、Web、微信小程序，但是在微信小程序上表現(xiàn)會(huì)差一些。

 

 

什么是SVGA

 

 

SVGA 是由YY團(tuán)隊(duì)開發(fā)出來的一種跨平臺(tái)的開源動(dòng)畫格式，同時(shí)兼容 iOS / Android / Web。SVGA 除了使用簡單，性能卓越，同時(shí)讓動(dòng)畫開發(fā)分工明確，各自專注各自的領(lǐng)域，大大減少動(dòng)畫交互的溝通成本，提升開發(fā)效率，動(dòng)畫設(shè)計(jì)師專注動(dòng)畫設(shè)計(jì)，通過工具輸出svga動(dòng)畫文件，提供給開發(fā)工程師在集成 svga player 之后直接使用。

 

SVGA 不同于 Lottie，Lottie 需要在 Player 一層完整地將 After Effects 所有邏輯實(shí)現(xiàn)，而 SVGA 則將這些邏輯免去。也因此，SVGA 可以同時(shí)支持 Flash。SVGA 做的事情，實(shí)際上，非常簡單，Converter 會(huì)負(fù)責(zé)從 Flash 或 AE 源文件中提取所有動(dòng)畫元素（位圖、矢量），并將其在時(shí)間軸中的每幀表現(xiàn)（位移、縮放、旋轉(zhuǎn)、透明度）導(dǎo)出。 Player 會(huì)負(fù)責(zé)將這些信息還原至畫布上。

 

 

 

AE基礎(chǔ)屬性制作輸出 SVGA

 

筆者常用的動(dòng)效制作軟件是After Effects，因此主要講如何通過AE制作導(dǎo)出SGAV動(dòng)效，利用AE制作基礎(chǔ)屬性動(dòng)畫，基礎(chǔ)屬性動(dòng)畫包括（位移、縮放、旋轉(zhuǎn)、透明度）。

 

第一步：從sketcg或者PS中將禮物和禮物效果元素切圖導(dǎo)出，根據(jù)個(gè)人需可以將禮物拆分成幾塊分別導(dǎo)出，方便AE中制作動(dòng)              態(tài)效果。

 

 

 

第二步：將導(dǎo)出的切圖素材導(dǎo)入AE中，利用AE制作基礎(chǔ)屬性動(dòng)畫，制作完成后結(jié)果如下

 

第三步：將背景隱藏在窗口-擴(kuò)展中找到SVGAConverter_A

 

 

 

 

第四步：用SVGAConverter_AE插件導(dǎo)出SVGA文件，輸出SVGA時(shí)記得把背景調(diào)成透明背景，輸出后如下通過下圖可以看到SVGA輸出格式后文件大小僅為145KB，如果是序列幀的話文件大小高達(dá)10幾M

 

 

 

AE預(yù)設(shè)效果制作輸出 SVGA

 

 

接觸過SVGA的同學(xué)應(yīng)該都知道，SVGA支持位圖、矢量和一些基礎(chǔ)屬性動(dòng)畫，很多時(shí)候我們制作禮物特效的時(shí)候，都是用自己做好的位圖素材導(dǎo)入AE進(jìn)行一些基礎(chǔ)屬性的動(dòng)畫制作，這次我將利用序列幀位圖制作出一些更炫的禮物特效。

 

第一步：在AE中用預(yù)設(shè)效果制作出自己滿意的禮物特效

第二步：將制作的特效動(dòng)畫導(dǎo)出序列幀，然后在將序列幀從新導(dǎo)回AE中，新建預(yù)合成將每一幀拼接起來，這樣做的目的是因?yàn)镾VGA無法識(shí)別AE的表達(dá)式和效果預(yù)設(shè)，所以我們將特效轉(zhuǎn)為序列幀后在重新放進(jìn)AE，序列幀是位圖所以SVGA可以識(shí)別并導(dǎo)出特效。

 

 

 

第三步：接下來將制作好的序列幀預(yù)合成放置到禮物特效合成中，打開SVGA插件輸出SVGA禮物特效動(dòng)畫

AE插件制作輸出 SVGA

 

 

這次我用AK大佬的插件saber為大家做案例，saber是一款很不錯(cuò)的光效制作插件，也比較容易上手，視覺表現(xiàn)力也非常棒，本篇文章主要是將SVGA，所以就不給大家具體說明saber如果做禮物特效了。

 

第一步：根據(jù)禮物的輪廓利用saber插件制作出火焰燃燒效果。

 

第二步：和剛才所說的預(yù)設(shè)效果特效動(dòng)畫一樣，我們通過AE將特效動(dòng)畫導(dǎo)出PNG序列幀，然后在將序列幀導(dǎo)回AE，并將每一幀拼接起來，這里有個(gè)小技巧給大家說下，用過saber的同學(xué)都知道saber的用法是利用AE的圖層樣式“屏幕”將光效合成在圖里，其實(shí)saber也可以導(dǎo)出透明背景的PNG的，方法很簡單，將saber當(dāng)前圖層復(fù)制一層，然后對復(fù)制出來的副本進(jìn)行用亮度遮罩。

 

 

第三步：接下來將制作好的序列幀預(yù)合成放置到禮物特效合成中，打開SVGA插件輸出SVGA禮物特效動(dòng)畫。

總結(jié)

 

最后聊一下關(guān)于用其他軟件制作的禮物動(dòng)畫，根據(jù)上面所說的幾種方法可以發(fā)現(xiàn)，我們想要在SVGA中想要得到更好的效果，就是將制作的特效輸出為序列幀后在AE中重新拼接起來，換一種說法就是我們可以不僅限于AE來制作，也可以使用C4D或者其他設(shè)計(jì)軟件來做，只需要我們將最終效果已序列幀的形式進(jìn)行輸出即可。

 

并且我們也可以利用關(guān)鍵幀、基礎(chǔ)屬性和插件相結(jié)合來做，值得注意的是如果視覺效果做的太過復(fù)雜會(huì)導(dǎo)致文件過大，同時(shí)也會(huì)產(chǎn)生性能方面的問題，在制作的過程中大家還時(shí)要把握好一個(gè)度。