在一個(gè)月黑風(fēng)高的夜里，一位開發(fā) Da Lao 在朋友圈吐槽『你們 UED 設(shè)計(jì)的動(dòng)畫，太炫了！我們實(shí)現(xiàn)不了……！』，接著UED 大當(dāng)家與這位 Da Lao ?談了一整晚的人生。
第二天，大當(dāng)家把 Pony 捉到了會議室，說道：『給你個(gè)死任務(wù)，把 UED 設(shè)計(jì)出來的動(dòng)畫，實(shí)現(xiàn)到《ME直播》中，不然就拿你去祭天』。
我當(dāng)場就尿了啊…… 給你看看，UED 的動(dòng)畫是醬紫的。
這個(gè)動(dòng)畫，如果輸出成 GIF 的話，要 3.0 M，尺寸是750 * 750。
Issue
那么，為什么上面那位 Da Lao 說，實(shí)現(xiàn)不了呢？如果使用 GIF 實(shí)現(xiàn)，有以下問題。
- 動(dòng)畫文件太大（3M 的大小）
- 播放資源占用高（內(nèi)存占用 30M / CPU 占用50%）
- 效果差（GIF 只支持 8 位顏色）
那么，使用 WebP 呢？嗯，使用 WebP 可以把動(dòng)畫文件壓縮一半，但是，播放資源占用問題沒有解決，這個(gè)才是最頭疼的問題，想想，一個(gè)直播流已經(jīng)占掉 20M 內(nèi)存了，然后，一個(gè)禮物動(dòng)畫出來，應(yīng)用直接掛掉了??……
那么，使用 A-PNG 呢？使用 A-PNG 可以完美地解決效果差的問題，因?yàn)?PNG 支持 32 位顏色啊，但是，同樣的天使動(dòng)畫，大小可以達(dá)到 9M，播放資源占用更更更高！??！
有沒有一箭三雕的辦法？
其實(shí)是有的，早在 2015 年，Adobe 就已經(jīng)把 CreateJS 收歸旗下，并且可以完美地將 Flash 動(dòng)畫導(dǎo)出至 Web 中。也正是同一個(gè)時(shí)期，BodyMovin 出現(xiàn)了，BodyMovin 可以將另一個(gè) Adobe 的軟件 After Effects 所設(shè)計(jì)的動(dòng)畫完美地導(dǎo)出至 Web 中。這兩者的出現(xiàn)，是我們開發(fā) SVGA 靈感的源泉。
具體的思路是，將動(dòng)畫腳本導(dǎo)出，再將動(dòng)畫元素（位圖）導(dǎo)出，然后在對應(yīng)的客戶端，重新拼合這些位圖。這樣做的好處很明顯，元素是有限的，動(dòng)畫腳本也非常輕量，我們只需要一次性地把元素還原出來就可以了。
相比序列幀，這種方案得到的動(dòng)畫文件非常小，播放資源占用也非常小，效果卻相當(dāng)好（因?yàn)槭褂?PNG 支持 32 位顏色）。
實(shí)現(xiàn)
在 2016 年的時(shí)候， Lottie 還沒開源，并且 BodyMovin 的文檔也相當(dāng)欠缺，我們是不可能重新實(shí)現(xiàn)一個(gè) BodyMovin 在 iOS / Android 上的播放器的。
于是，干脆重寫一個(gè)？然后 Pony 就用了兩周的時(shí)間，把 SVGA Flash 轉(zhuǎn)換器寫出來了，再用兩周時(shí)間，把 iOS 和 Android 的 Player 也寫出來（當(dāng)然，只是 Demo 階段）。一個(gè)月后，拿出來，給 Da Lao 們欣賞欣賞，Da Lao 們都驚呆了……
這個(gè)方案，不僅資源占用很小很?。▋?nèi)存占用 8M 左右，CPU 占用 2%），文件大小也非常?。ㄌ焓箘?dòng)畫只需 295 K），效果還特碼的很牛逼！
接著，就有了 SVGA 這個(gè)項(xiàng)目，并經(jīng)過了一整年的迭代，在 YY 系的產(chǎn)品中有超過十多個(gè)產(chǎn)品的使用，應(yīng)用范圍涵蓋 iOS / Android / Web / PC 客戶端等。
對比
沒有對比就沒有傷害……
既然 Lottie 這么強(qiáng)大，我們就用 SVGA 來跟她比較一下吧。
CreateJS / Lottie
CreateJS / Lottie 實(shí)現(xiàn)的原理，都是將設(shè)計(jì)軟件中的時(shí)間軸完整地導(dǎo)出來，包括里面的各種關(guān)鍵幀信息、矢量路徑、樣式等等。其中，最為關(guān)鍵的是『關(guān)鍵幀』！
由于使用的是關(guān)鍵幀動(dòng)畫描述，那么對應(yīng)的 Player 就難免變得復(fù)雜起來。如果只是簡單的一次線性方程，比如，物體從 A 點(diǎn)勻速移動(dòng)至 B 點(diǎn)，還 OK。但是，當(dāng)遇到二次線性方程、貝塞爾曲線方程這些高階插值計(jì)算的時(shí)候，Player 就會很吃力！
另外一點(diǎn)值得注意的是，CreateJS 可以導(dǎo)出 Flash 動(dòng)畫，Lottie 可以導(dǎo)出 After Effects 動(dòng)畫，但是他們都不能導(dǎo)出對方的動(dòng)畫（每種設(shè)計(jì)工具的腳本都是不一致的）。這也意味著，你家的設(shè)計(jì)師只能使用其中一種設(shè)計(jì)工具。
再有一個(gè)坑，Lottie 在導(dǎo)出位圖動(dòng)畫后，使用起來是相當(dāng)麻煩的，你要先打包成 ZIP，再解壓到本地目錄，才能播放。
SVGA
SVGA 使用的是另外一套邏輯，SVGA 不關(guān)心關(guān)鍵幀，因?yàn)?SVGA 里面的每一幀都是關(guān)鍵幀！也就是說，SVGA 已經(jīng)在導(dǎo)出動(dòng)畫的時(shí)候，把每一幀的信息都計(jì)算好了。這樣，Player 也就不用關(guān)心插值計(jì)算的過程。
正因?yàn)槿绱耍琒VGA 可以同時(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 就可以了！
在功能上，SVGA 更貼合產(chǎn)品，SVGA 所提供的動(dòng)態(tài)文本、動(dòng)態(tài)圖像功能都是其它庫所不能提供的。
性能
我們最關(guān)心的永遠(yuǎn)是性能問題，SVGA 在設(shè)計(jì)之初就考慮到性能問題。
iOS
在 iOS 上，使用的是 CALayer 的方式進(jìn)行渲染，整個(gè)渲染過程都處于 GPU 優(yōu)化下，即使是 60 FPS 的動(dòng)畫播放起來，也是棒棒噠。
Android
在 Android 上的實(shí)現(xiàn)與 Lottie 類似，使用 ImageView + Drawable 方式進(jìn)行渲染，這也意味著，SVGA 可以任意地嵌入到 UI 層級中，并且 Canvas 的性能也不差。
為什么不使用 SurfaceView？
這是一個(gè)慘痛的經(jīng)歷，當(dāng)初 SVGA 的 Player 是使用 SurfaceView 的，但是，SurfaceView 在硬件加速的情況下，只能獨(dú)立于 UI 層級（在最頂或者最底），使用軟件方式渲染呢？那個(gè)性能，可以嚇?biāo)滥恪?/p>
Web
在 Web 上，使用 Canvas 進(jìn)行渲染，效果、性能也是棒棒噠，反正我在 Web 上沒有看過到類似的庫。
SVGA 生態(tài)
SVGA 提供一整套的動(dòng)畫解決方案，從設(shè)計(jì)、產(chǎn)品、開發(fā)三個(gè)環(huán)節(jié)保障動(dòng)畫可快速落地。
為了讓設(shè)計(jì)師可以快速地導(dǎo)出動(dòng)畫，我們開發(fā)了 Flash / After Effects 插件。
為了讓開發(fā)者可以輕易地接入動(dòng)畫，我們開源了 iOS / Android / Web 三個(gè)平臺的源碼。
https://github.com/yyued/SVGAPlayer-iOS
https://github.com/yyued/SVGAPlayer-Android
https://github.com/yyued/SVGAPlayer-Web
為了讓所有人都可以快速獲知?jiǎng)赢嬍欠裾?，?dòng)畫中的元素屬性，我們開發(fā)了動(dòng)畫預(yù)覽器。
http://svga.io/svga-preview.html
為了解決設(shè)計(jì)師、開發(fā)者的疑難問題，我們還提供 Q 群服務(wù) 576461005
所有的一切，都是為了文章最初的那句話，不要把 Pony 拿去祭天
