首先想說下為啥要寫這篇文章，最近接到個(gè)項(xiàng)目任務(wù)，制作直播間禮物贈送視覺效果，由于之前沒有接觸過此類設(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á)有問題的地方歡迎大家指正…

一、禮物動效輸出方法

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

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

B：使用屬性動畫

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

C：輸出 GIF 文件

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

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

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

二、什么是 SVGA

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

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

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

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

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

第二步：將導(dǎo)出的切圖素材導(dǎo)入 AE 中，利用 AE 制作基礎(chǔ)屬性動畫，制作完成后結(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ǔ)屬性動畫，很多時(shí)候我們制作禮物特效的時(shí)候，都是用自己做好的位圖素材導(dǎo)入 AE 進(jìn)行一些基礎(chǔ)屬性的動畫制作，這次我將利用序列幀位圖制作出一些更炫的禮物特效。

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

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

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

五、AE 插件制作輸出 SVGA

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

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

第二步：和剛才所說的預(yù)設(shè)效果特效動畫一樣，我們通過 AE 將特效動畫導(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 禮物特效動畫。

總結(jié)

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

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

附件有 AE 的 SVGA 安裝包大家可以下載

參考資料：

1. SVGA： http://svga.io/designer.Html
2. https://juejin.im/entry/59f1648f5188254115700ee6
3. https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbf
4. https://blog.csdn.net/gutaocslg/article/details/79908414

作者：Tomato76