一都弹、下載sdk
github地址：https://github.com/svga/SVGAPlayer-Web/tree/mp
下載倉庫下的 build/svga.min.js 并放置到小程序工程適當目錄下
二仙蚜、小程序實現(xiàn)
1.引入sdk
const SVGA = require("../svga.min.js")
2.js代碼
其中svgaUrl為svga播放路徑
player.loops=1設置為播放一次，默認是0會循環(huán)播放翔悠，循環(huán)播放時結束回調函數(shù)是不會觸發(fā)的
更多其他功能可以查看上方官方的github中的介紹业崖，簡單易懂
playSvga(svgaUrl){
let parser = new SVGA.Parser()
let player = new SVGA.Player("#myCanvas")
let that=this
player.loops=1
parser.load(svgaUrl, function (videoItem) {
console.log(videoItem)
that.setData({
svgaHeight:videoItem.videoSize.height,
svgaWidth:videoItem.videoSize.width,
})
player.setVideoItem(videoItem);
player.startAnimation();
player.setContentMode("AspectFit")
player.onFinished(res=>{
console.log("動畫停止了")
})
})
}
3.html代碼
<view c style="display:flex;justify-content: center;align-items: center;width:100%;height:812px">
<canvas type="2d" style="width:{{svgaWidth}}rpx;height:{{svgaHeight}}rpx" id="myCanvas" ></canvas>
</view>
三、注意事項
1.真機預覽記得設置白名單域名
2.如果遇到報錯500蓄愁，那么恭喜双炕，可以好好找找問題了，找了半天你會發(fā)現(xiàn)實在找不到哪里有問題撮抓，或許你可以嘗試重啟一下微信開發(fā)工具妇斤，發(fā)現(xiàn)ok了，巨坑
3.還有就是真機調試是不支持canvas的丹拯，用預覽做真機測試就好
