欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

svga动画播放

程序员文章站 2022-03-02 19:44:43
...

安装参考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