1、什么是SVGA
SVGA是一種動畫格式，可以兼容安卓、ios和web，可以實(shí)現(xiàn)很多復(fù)雜的動畫，這樣開發(fā)就不用頭疼canvas來實(shí)現(xiàn)動畫時的卡頓優(yōu)化問題了。
2、引入SVGA
因?yàn)椴┲魇乔岸朔较虻?，所以這里只介紹web頁面如何引入，這個是SVGA官方的web地址，如果大家感興趣可以看一下
和正常js引入一樣，我們是需要script引入即可。
在引入svga之后，我們需要在html中生命一個對象來存放svga動畫。
這里只是簡單定義。
3、讓svga動起來
```
var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas');
parser.load('img/bb.svga', function(videoItem) {
? ? player.loops = 2;
? ? player.clearsAfterStop = false;
? ? player.setVideoItem(videoItem);
? ? player.startAnimation();
? ? player.onFrame(function (i) {
? ? });
})
```
我們可以看到，需要定義Player和Parser來統(tǒng)一完成一個動畫的實(shí)現(xiàn)。
在load的callback函數(shù)中，我們可以設(shè)置
```
loop 循環(huán)次數(shù)
clearsAfterStop 動畫結(jié)束都是否清楚內(nèi)容，注意，這里如果不設(shè)置 默認(rèn)true
setVideoItem 需要獲取load返回參數(shù)才能生效
startAnimation 開始動畫
pauseAnimation 暫停動畫
stopAnimation? 停止動畫
onFrame 我們可以通過這個函數(shù)知道當(dāng)前動畫是播放的第幾幀，然后根據(jù)具體業(yè)務(wù)需求展示效果。
```
4、svga的讀取是依賴canvas的
可以看出 我們可以動過調(diào)節(jié)對象元素的樣式來實(shí)現(xiàn)canvas的控制。
結(jié)語：
Svga可以很好的節(jié)省動效開發(fā)的時間，而且具有很好的兼容性，還可以完美還原設(shè)計稿。但是svga畢竟是一個動畫文件，畢竟動畫的方式是唯一的，所以對于多樣性的根據(jù)用戶操作來實(shí)現(xiàn)個性化展示的 還是需要依托于基礎(chǔ)的js或者css來控制實(shí)現(xiàn)。
