動(dòng)畫，對(duì)于任何一個(gè)前端工程師來(lái)說(shuō)，都是一項(xiàng)可敬可畏的工作。好的動(dòng)畫，可以讓應(yīng)用、網(wǎng)站增色不少。然而，要將動(dòng)畫一絲不差地實(shí)現(xiàn)在對(duì)應(yīng)平臺(tái)上，并不是一件容易的事情。

在實(shí)現(xiàn)動(dòng)畫前，動(dòng)畫設(shè)計(jì)師會(huì)給出動(dòng)畫源文件，但是要實(shí)現(xiàn)這些動(dòng)畫，要么選擇性能不佳的序列幀（內(nèi)存、CPU占用大），要么則選擇 Hard-Code 的方式實(shí)現(xiàn)，這些代碼一般來(lái)說(shuō)要幾千行，并且難以維護(hù)。

因此，我們所遇到的情況就是，幾乎每個(gè)應(yīng)用都在削減動(dòng)效……

作為直播應(yīng)用的前端，當(dāng)然也遇到這種問(wèn)題，并且，這種問(wèn)題同時(shí)影響著用戶體驗(yàn)與營(yíng)收。我們遇到的首先是禮物動(dòng)畫，禮物動(dòng)畫的尺寸是 500px * 500px，15 FPS 持續(xù) 4 秒。以往，使用幀動(dòng)畫的方式播放此類動(dòng)畫，內(nèi)存、CPU開(kāi)銷居高不下。而使用代碼的形式實(shí)現(xiàn)動(dòng)畫，幾乎是不可能的事情。（點(diǎn)此查看動(dòng)畫 Sample）

于是，一年前，YY UED 團(tuán)隊(duì)決定改變這種現(xiàn)狀。

現(xiàn)在，我們自豪地將 SVGA 推薦給大家，SVGA 正是解決以上問(wèn)題的終極方案。SVGAConverter 可以將 Flash 以及 After Effects 動(dòng)畫導(dǎo)出成 .SVGA 文件（實(shí)際上是 ZIP 包），供 SVGAPlayer 在各平臺(tái)播放，SVGAPlayer 支持在 iOS / Android / Web / ReactNative / LayaBox 等平臺(tái)、游戲引擎播放。

SVGA 做的事情，實(shí)際上，非常簡(jiǎn)單，Converter 會(huì)負(fù)責(zé)從 Flash 或 AE 源文件中提取所有動(dòng)畫元素（位圖、矢量），并將其在時(shí)間軸中的每幀表現(xiàn)（位移、縮放、旋轉(zhuǎn)、透明度）導(dǎo)出。 Player 會(huì)負(fù)責(zé)將這些信息還原至畫布上。

因此，你會(huì)發(fā)現(xiàn)，SVGA既有序列幀的特點(diǎn)，又有元素動(dòng)畫的特點(diǎn)。Player 邏輯極度簡(jiǎn)單，她只負(fù)責(zé)粗暴地將每一個(gè)元素，絲毫不差地渲染到屏幕上，而無(wú)須任何插值計(jì)算。（我們認(rèn)為，任何插件計(jì)算的邏輯都是復(fù)雜的）

也因此，你會(huì)發(fā)現(xiàn)，SVGA 不同于 Lottie，Lottie 需要在 Player 一層完整地將 After Effects 所有邏輯實(shí)現(xiàn)，而 SVGA 則將這些邏輯免去。也因此，SVGA 可以同時(shí)支持 Flash，我們相信 Flash 以及其繼承者 Animate CC 仍然有強(qiáng)大的生命力，以及完善的設(shè)計(jì)生態(tài)。

SVGA 最初的目標(biāo)是為降低序列幀動(dòng)畫開(kāi)銷而生的，因此，性能問(wèn)題一直是 SVGA 關(guān)注的焦點(diǎn)。如果你可以深入地探究 SVGA 的實(shí)現(xiàn)方式，你會(huì)發(fā)現(xiàn)，SVGA 實(shí)質(zhì)上做了一件非常重要的事情。她會(huì)在動(dòng)畫播放前，一次性地上傳所有紋理到 GPU，接著，在播放的過(guò)程中，這些紋理會(huì)被重復(fù)使用。CPU 與 GPU 交換的次數(shù)大大減少，同時(shí)，紋理的數(shù)目也在可控范圍。內(nèi)存、CPU、GPU 占用能達(dá)到最優(yōu)狀態(tài)。

如果你現(xiàn)在還在猶豫是否要使用 SVGA，不妨先打開(kāi) SVGA 網(wǎng)站查看 Sample。