前有分享一些動效落地的方案，例如：

直播App中Android酷炫禮物動畫實現方案（上篇）

動效從設計到代碼-網易云音樂2018年度聽歌報告的背后

干貨 | 淘寶設計師談動效的高效設計與交付

這個系列還有很多篇，可以在公眾號的“干貨文章”的“動效落地”專欄查看更多。

今天再給大家分享一篇關于 SVGA 的動效落地方案的干貨文章，相信認真看完對你很有裨益。

轉自公眾號：墨染動效

作者：Tomatao_

作者站酷：https://www.zcool.com.cn/u/14129343

以下是文章內容

前言

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

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

禮物動效輸出方法

A：導出關鍵幀動畫制作禮物動效

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

B：使用屬性動畫

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

C：輸出GIF文件

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

D：使用SVGA

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

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

什么是SVGA

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

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

AE基礎屬性制作輸出 SVGA

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

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

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

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

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

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

AE預設效果制作輸出 SVGA

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

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

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

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

AE插件制作輸出 SVGA

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

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

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

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

總結

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

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

參考資料：

SVGA：http://svga.io/designer.html

https://juejin.im/entry/59f1648f5188254115700ee6

https://juejin.im/entry/59f6c0ec6fb9a0451d40bfbf

https://blog.csdn.net/gutaocslg/article/details/79908414

請私信我回復“666”，為嚴哥打Call~，還有更多驚喜哦~

.............................................................

UI嚴選—越努力，越幸運

近，國家政策開始鼓勵“地攤經濟”，一時間各家企業平臺紛紛推出地攤扶持政策，地攤概念股順勢大漲，地攤生態及配套商品也開始走俏，甚至在網絡上也涌現出各種“新攤主速成攻略”，萬億的煙火經濟儼然已經走上風口。

實際上，早就有人已經在網上“擺地攤”了，那就是直播帶貨！受到疫情的影響，線下實體紛紛停擺，直播帶貨受到了前所未有的追捧，企業們紛紛選擇通過直播的形式，來提升品牌形象、保持與用戶的互動并完成商品的銷售。

那么問題就來了，在搭建直播平臺或者應用的過程中，都需要關注哪些技術呢？CDN又對直播起到什么作用呢？

一個直播系統都包括什么？

通常整個直播的系統可能包括：推流端經過一次邊緣節點的加速，將視頻直播流推到直播中心，在直播中心完成一系列轉碼、截圖、錄制、水印等處理，然后視頻流再經過CDN分發，分發到不同的播放端，播放端有不同的SDK進行秒開、弱網等優化動作。

直播系統中的推流與播放

對于視頻直播來講，最重要的兩個環節，一個是推流，一個是播放。推流一般采用RTMP協議，常用的推流端包括OBS、手機APP、FFmpeg等。播放除了采用RTMP協議，還可以采用HTTP FLV和HLS協議，RTMP和HTTP FLV是流式傳輸，HLS是文件加速傳輸，常見的播放端包括：Flash / VLC / HTML5 / 手機App等等。對于阿里云直播系統來講，大部分直播分發都是通過流式傳輸完成的，只有一少部分量是使用文件加速分發完成的。

流式分發與CDN直播系統

其實在直播場景中，不管是推流還是播放，流式分發都是長連接的，一場直播可能5個小時，推流在這5小時內不會中斷。對于播放器來講，服務器端獲取到的是一幀一幀的音視頻數據，不管是什么傳輸協議，都是采用FLV tag來封裝。每一幀音頻或者視頻，都會有一個時間戳的屬性。

視頻直播流會傳輸音頻幀和視頻幀，對于音頻幀來講，它每一幀都可以獨立解碼，播放器從服務器獲取到任何一幀音頻幀之后，都可以獨立渲染，聽到聲音。而視頻分為視頻關鍵幀和非關鍵幀，關鍵幀可以獨立解碼渲染，播放器拿到后可以直接看到畫面，一般10K以上甚至幾十K；其他非關鍵幀解碼依賴于前面的一些視頻幀，播放器會根據前面的幀和這一幀來解碼產生畫面，非關鍵幀一般大小是幾K甚至不到1K。對于播放器來說，服務器一般會從視頻關鍵幀開始發送，這樣才不會產生花屏。

對于節點上直播服務器存儲的內容，如果是文件加速，節點上存儲的內容很明確，就是文件數據, URL不變的話文件數據內容也不變。但是對于直播來講，傳輸的就是幀數據，緩存的也是不斷變化的幀序列數據。下面的圖里可以看到，當前的服務器緩存了V1-V3五幀數據，當V4這個關鍵幀出現了，服務器把之前的丟掉，開始緩存V4開始的音視頻數據，以這個策略保證過來的播放端都是當前最新的數據。一般直播服務器都是用這個策略來進行服務器緩存的。

直播平臺面臨的挑戰？

1、 前面也說了，直播系統包含推流、轉碼、分發、播放等各個環境，經歷了冗長復雜的網絡環境，尤其是當業務場景逐漸豐富起來之后，功能需求也越來越多2、 一些關鍵指標的提升，比如：卡頓率、打開速度、流暢度、回源率等，任何指標的下降都可能會導致整個應用的用戶體驗下降，影響直播效果3、 直播平臺經常會面臨業務突發，數十萬甚至數百萬用戶的同時在線，對服務器和帶寬考驗十分巨大

直播平臺為什么要使用CDN？

1、減少卡頓率，提升用戶體驗

直播，尤其是電商直播，對網絡抖動十分敏感，稍有問題就會出現卡頓、花屏等問題，嚴重影響用戶體驗，甚至直接掉線影響銷售。CDN借助負載均衡系統能夠將內容推送到接近用戶的邊緣節點，使得用戶就近取得資源，可以大大提升訪問效率。

2、業務峰值來臨的時候，為流量高峰護航

在確保直播流暢度上，全球覆蓋的CDN節點和精準調度系統缺一不可。CDN節點是采用分布式架構，節點資源與帶寬儲備就代表了能夠覆蓋的用戶的量級和廣度。當突發峰值特別高的時候，CDN系統會確保用更精準的調度策略，比如DNS、IP調度，來降低對直播的影響。打比方有一個裝了很多冰塊和水的杯子，如果我們要把杯子里面的狹小空間全部用上，我們先要把冰塊放進去，再倒液態水。在智能調度的場景里，把“固體”和“液體”結合起來考慮，才能做到所有的節點、水位的精準控制，實現更精準的調度。

所以，選擇節點和帶寬資源覆蓋廣泛，綜合實力強，質量有保證，具備大型項目最佳實踐的CDN服務提供商對直播帶貨平臺來說至關重要。想要在云上開啟“地攤經濟”，阿里云CDN，了解一下~

阿里云全速重構年中大促中，CDN/全站加速、視頻直播、視頻點播等多款產品都推出限時折扣，點擊登陸活動頁面了解優惠詳情