SVGA文件格式——SVGA動(dòng)畫制作和文件轉(zhuǎn)換

什么是SVGA

SVG，它的英文全稱為Scalable Vector Graphics，即可伸縮矢量圖形。

SVGA，就是Scalable Vector Graphics Animetion，即可伸縮矢量圖形動(dòng)畫，理解為就是一種2d位圖動(dòng)畫的儲(chǔ)存格式，可以很小的容量播放一個(gè)帶通道的效果，很好的替代png序列（文件容量大）、gif文件格式（不支持透明通道\色域低）。

繪制矢量圖形也蠻占性能，目前更多使用提前做好的位圖導(dǎo)入AE制作動(dòng)畫。

帶來(lái)的直觀好處：一個(gè)10幾MB大的序列幀效果，用svga格式可以只要幾百K甚至幾十K。

設(shè)計(jì)師所制作的效果，就是用戶在版本中的完整效果，保證效果也讓內(nèi)存不會(huì)爆掉。

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

制作思路

舉例用Animate制作，首先需要安裝SVGA插件，注意這個(gè)插件是不收費(fèi)的，官網(wǎng)上有，安裝也非常簡(jiǎn)單。然后就正常制作動(dòng)畫，制作的時(shí)候避免使用影片剪輯元件，不能使用遮罩，不能使用屬性動(dòng)畫。想做顏色絢麗復(fù)雜的禮物特效可以用png序列圖導(dǎo)入。制作完成后，在窗口——擴(kuò)展——SVGAConverter_FL，

然后彈出輸出窗口

點(diǎn)擊輸出路徑，指定輸出的盤符位置，把禮物的名字寫好；

然后點(diǎn)擊“開始轉(zhuǎn)換-2.0”

稍等之后文件就轉(zhuǎn)換完成了，在中間綠點(diǎn)區(qū)域就會(huì)出現(xiàn)轉(zhuǎn)換好的SVGA禮物動(dòng)畫，

還可以點(diǎn)擊“選擇播放文件”找到已經(jīng)做好的.svga格式的文件，播放效果，方便修改。

制作效果

svga動(dòng)畫效果

svga文件格式

SVGA文件后綴名是.svga；一目了然，文件都比較小。

SVGA 可以同時(shí)支持 Flash 和 After Effects 的導(dǎo)出，只需要在各自轉(zhuǎn)換器中計(jì)算差值就好了。

SVGA 在設(shè)計(jì)之初就支持位圖元素，在 1.x 格式時(shí)使用 ZIP 進(jìn)行打包，在 2.x 格式中，直接使用 ProtoBuf + Zlib 方式打包，作為開發(fā)者，完全不用關(guān)心應(yīng)該怎樣下載、解壓、獲取位圖文件，直接把 svga 文件扔進(jìn)去 Player 就可以了！