react加载svga动画

react加载svga动画
svga动画优点:

1. 高效，终端只需要继承这套方案框架，把动画实现交给动画设计师即可。
2. 高性能，在实现酷炫动画的基础上，播放性能表现优于Gif和WebP。
3. 动画文件小，同样的动画效果，SVGA文件要比Gif和WebP的文件小得多。

svga有这么多优点我们怎么使用呢:

1. 安装svgaplayerweb

npm install svgaplayerweb --save

2. 引入svgaplayerweb

import SVGA from 'svgaplayerweb'

3. 添加div容器

 <div id="demoCanvas" className={style.svga} loops="0" clearsAfterStop="true"></div>

4. 加载动画

var player = new SVGA.Player('#demoCanvas');
var parser = new SVGA.Parser('#demoCanvas'); // 如果你需要支持 IE6+，那么必须把同样的选择器传给 Parser。
parser.load('saoguang.svga', function(videoItem) {
    player.setVideoItem(videoItem);
    player.startAnimation();
})

5. css

    .svga{
      width: 700px;
      height: 230px;
    }

GitHub地址:svgaplayerweb

svga动画文件引入方式可本地直接引入或将svga文件放置云服务器通过云服务地址引入
svga动画首次可以加载,刷新后无法加载,可在初始化时增加定时器如下:

  setTimeout(() => {
      var player = new SVGA.Player("#demoCanvas");
      parser.load('https://XXXXsaoguang.svga', function (videoItem) {
        player.setVideoItem(videoItem);
        player.startAnimation();
      });
    }, 0);