web端--列表循环渲染多个svga动画

1.引入文件:

<script src="./assets/lib/svga.min.js"></script>

2.引用声明:

declare var SVGA: any;

3.html部分:

<div class="box">
    <div id="svgaLikeBox{{ item.id }}"></div>
</div>

.box{
  background-color: black;
  height: 100px;
  width: 100px;
  overflow: hidden;
  > div {
    width: 100%;
    height: 100%;
  }
}

4.js部分:

this.list.forEach((item, i) => {
     // 循环判断是什么文件类型
     let newPath = item.path.substring(item.path.lastIndexOf('.') + 1);
     // 若是为svga则继续执行
     if (newPath.toLowerCase() === 'svga') {
        /**播放svga*/
        // 延迟加载,不然有可能播放不了svga
        setTimeout(() => {
         // 拿到每一个不同的盒子去渲染
         let box = '#svgaLikeBox' + item.id;
         item.svgaPlayer = new SVGA.Player(box);
         // item.svgaPlayer.loops = 1; // 播放svga一次,不设置则一直循环播放
         item.svgaParser = new SVGA.Parser(box);

         item.svgaParser.load(`${environment.imageDomain + '/' + item.path}`, (videoItem) => {
         // 注意渲染多个svga时,不能使用this
         item.svgaPlayer.setVideoItem(videoItem);
         item.svgaPlayer.startAnimation();
           });
         }, 100);
     }
});

5.演示视频:

https://live.csdn.net/v/331246