svga动画播放

安装参考svga官方github

https://github.com/svga/SVGAPlayer-Web

html

<div id='demoCanvas'></div>

js

var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); 
parser.load('static/img/bullet/anim.svga', function(videoItem) {
  player.loops = 2
  player.clearsAfterStop = false
  player.setVideoItem(videoItem)
  player.startAnimation()
  player.onFrame(function (i) {
  })
})

api

loop 循环次数
clearsAfterStop 动画结束都是否清楚内容,注意,这里如果不设置 默认true
setVideoItem 需要获取load返回参数才能生效
startAnimation 开始动画
pauseAnimation 暂停动画
stopAnimation 停止动画
onFrame 我们可以通过这个函数知道当前动画是播放的第几帧,然后根据具体业务需求展示效果

你可能感兴趣的:(前端-element)