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

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

一、禮物動效輸出方法

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

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

B：使用屬性動畫

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

C：輸出 GIF 文件

缺點：輸出效果差，并且資源占用高

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

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

二、什么是 SVGA

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

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

三、AE 基礎屬性制作輸出 SVGA

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

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

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

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

第四步：用 SVGAConverter_AE 插件導出 SVGA 文件，輸出 SVGA 時記得把背景調(diào)成透明背景，輸出后如下

通過下圖可以看到 SVGA 輸出格式后文件大小僅為 145KB，如果是序列幀的話文件大小高達 10 幾 M

四、AE 預設效果制作輸出 SVGA

接觸過 SVGA 的同學應該都知道，SVGA 支持位圖、矢量和一些基礎屬性動畫，很多時候我們制作禮物特效的時候，都是用自己做好的位圖素材導入 AE 進行一些基礎屬性的動畫制作，這次我將利用序列幀位圖制作出一些更炫的禮物特效。

第一步：在 AE 中用預設效果制作出自己滿意的禮物特效

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

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

五、AE 插件制作輸出 SVGA

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

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

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

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

總結(jié)

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

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

附件有 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