在當(dāng)下移動(dòng)直播火爆的年代，如果你曾經(jīng)使用過移動(dòng)端直播應(yīng)用铣减，相信會(huì)被里面那令人驚嘆的禮物動(dòng)畫效果迷住，比如像下面這樣的效果脚作。
從開發(fā)人員的角度來看葫哗，這樣的效果雖然漂亮，實(shí)現(xiàn)但卻是一大挑戰(zhàn)球涛，除了要考慮編碼實(shí)現(xiàn)的效率劣针、性能表現(xiàn)外，還要結(jié)合直播業(yè)務(wù)本身的特性等亿扁。
實(shí)現(xiàn)思路
首先捺典，從實(shí)現(xiàn)思路方面入手，有以下幾個(gè)方案作為考慮：
方案一：幀動(dòng)畫从祝；
方案二：屬性動(dòng)畫襟己；
方案三：Gif或WebP；
方案四：實(shí)現(xiàn)一套播放動(dòng)畫的框架牍陌，客戶端只需要繼承進(jìn)來擎浴，UI設(shè)計(jì)師按照約定的動(dòng)畫語法作圖給開發(fā)人員即可；（原理類似SVG）
從實(shí)現(xiàn)性能毒涧、效率以及復(fù)用角度上來看贮预，我們最終采用了最后一種方案。
方案一需要把圖片帶到安裝包中，增大了安裝包體積仿吞，而且直播應(yīng)用中禮物種類很多滑频，每個(gè)禮物都帶一套幀動(dòng)畫進(jìn)去，相當(dāng)不科學(xué)唤冈。
方案二開發(fā)代價(jià)較大误趴，每一套禮物動(dòng)畫基本都不一樣，開發(fā)人員需要去細(xì)細(xì)調(diào)參务傲，花在業(yè)務(wù)上編碼的時(shí)間會(huì)變得非常有限凉当，從代碼復(fù)用率極低。
方案一售葡、二除了以上提到的缺陷外看杭，還有一個(gè)直播業(yè)務(wù)場(chǎng)景問題沒有解決，就是當(dāng)客戶端發(fā)布之后挟伙，想要上架一些新設(shè)計(jì)的禮物就必須要讓用戶升級(jí)客戶端楼雹，否則是無法體驗(yàn)到新上架的禮物。
方案三沒有以上提到的業(yè)務(wù)問題尖阔，但在性能方面并不是最優(yōu)選擇贮缅。Gif圖實(shí)質(zhì)上就是把一幀幀的靜態(tài)圖片打包到一起，打成一個(gè)壓縮包介却，但是由于Gif的壓縮算法問題谴供，實(shí)際上這個(gè)壓縮包一點(diǎn)都不小，隨便一個(gè)炫酷點(diǎn)的禮物效果都能弄個(gè)幾兆到十幾兆不等的文件出來齿坷，對(duì)于移動(dòng)端來說桂肌，不論從下載和播放的性能表現(xiàn)上都差強(qiáng)人意。Gif圖片能做的動(dòng)畫永淌，WebP格式的圖片同樣可以實(shí)現(xiàn)崎场，且WebP圖片要比Gif圖小很多，下圖是同樣效果用Gif和WebP的實(shí)現(xiàn)對(duì)比遂蛀。
復(fù)雜WebP動(dòng)圖在編解碼時(shí)谭跨，性能上表現(xiàn)得差強(qiáng)人意，而且雖然Android在4.0時(shí)開始支持WebP李滴，但是要支持有損且?guī)该飨袼氐腤ebP得到Android 4.2.1之后螃宙。Gif和WebP圖片還有一個(gè)場(chǎng)景上的缺陷是，如果我要在播放到某一幀動(dòng)畫時(shí)悬嗓，動(dòng)態(tài)插入一些幀污呼，實(shí)現(xiàn)起來難度較大，就像我們最近上線的產(chǎn)品Orangy里面的一個(gè)配對(duì)動(dòng)畫的效果包竹，在愛心桃的中間某一幀插入兩個(gè)配對(duì)者的頭像燕酷。
前面鋪墊了這么多籍凝，最終還是為了帶出我們的主角，方案四苗缩。方案四是YY UED團(tuán)隊(duì)所研發(fā)的一套動(dòng)畫實(shí)現(xiàn)方案饵蒂，作者給它起了名字叫SVGA，目前已經(jīng)在YY系的很多產(chǎn)品線上良好運(yùn)行著酱讶，下面簡單的介紹它的優(yōu)點(diǎn)：
對(duì)切圖小哥和寫B(tài)ug小哥友好退盯，嗯，沒錯(cuò)泻肯，再也不用互相傷害了渊迁。
高效，終端只需要繼承這套方案框架灶挟，把動(dòng)畫實(shí)現(xiàn)交給動(dòng)畫設(shè)計(jì)師即可琉朽。
高性能，在實(shí)現(xiàn)酷炫動(dòng)畫的基礎(chǔ)上稚铣，播放性能表現(xiàn)優(yōu)于Gif和WebP箱叁。
動(dòng)畫文件小，同樣的動(dòng)畫效果惕医，SVGA文件要比Gif和WebP的文件小得多耕漱。
跨平臺(tái)，支持Android抬伺、iOS螟够、React Native、Web沛简、還有不久前剛出來的微信小程序齐鲤，不過小程序上的繪制功能很弱，效果有點(diǎn)感人椒楣。
開源，可以直接訪問YY UED的Github獲取框架源碼 https://github.com/yyued
具體各種使用姿勢(shì)牡肉，可以參考開源庫中README上的說明捧灰，或者訪問SVGA的官網(wǎng) http://svga.io 。
實(shí)現(xiàn)原理
如果你熟悉SVG统锤，那么理解起SVGA的實(shí)現(xiàn)原理并不會(huì)很困難毛俏，今天太晚了，下篇文章會(huì)繼續(xù)聊饲窿，感興趣的同學(xué)可以閱讀源碼先睹為快煌寇，在沒有看代碼之前，你會(huì)怎么覺得內(nèi)部是怎么實(shí)現(xiàn)的呢逾雄？阀溶。哦腻脏，對(duì)了，這套代碼的作者Pony（我經(jīng)常叫他崔神）是個(gè)全棧大佬银锻，之前寫Java時(shí)覺得語法太繁瑣永品，后面干脆用Kotlin重寫了整套框架，就是這么任性击纬，我時(shí)常問崔神需不需要端茶遞水的小弟鼎姐，結(jié)果他總是不缺…
