svga图片播放控制

```import SVGA from 'svgaplayerweb';
  import { onMounted } from 'vue';
// SVGA图片播放控制
  const cartSvga = ref<any>({
    // 是否在播放
    cartAniPlay:false,
    // 播放器
    player:null,
    // 解析器
    parser:null,
    // svga对象
    videoItem:null,
    // 播放
    play: null,
    // 停止
    sotp: null,
    // 跳转到第几帧播放
    step: null
  })
  
  // 需要播放时调用
  // cartSvga.value?.play();
  
  const guideFn = () => {
    // 获取id的dom元素
    let player = new SVGA.Player(`#GoodsCart`);
    console.log('player', player);
    let parser = new SVGA.Parser();
    parser.load(
      'https://****/goodscart.svga',
      (videoItem) => {
        console.log('videoItem', videoItem);
        // 你的svga文件路径
        player.loops = 1;
        player.clearsAfterStop = false;
        player.fillMode = 'Backward';
        player.setVideoItem(videoItem);
        cartSvga.value.videoItem = videoItem
        cartSvga.value.play = ()=>{
          cartSvga.value.cartAniPlay = true
          player.stepToFrame(20, true);
        }
        cartSvga.value.sotp = ()=>{
          cartSvga.value.cartAniPlay = true
          player.stopAnimation()
        }
        cartSvga.value.step = (num=10)=>{
          cartSvga.value.cartAniPlay = true
          player.stepToFrame(num, true);
        }
        player.startAnimation ()
        cartSvga.value.cartAniPlay = true;
        player.stepToFrame(80, true);
        player.onFrame(function (i) {
          if(i === videoItem?.sprites?.length + 15) {
            console.log(i);
            player.stopAnimation()
            cartSvga.value.cartAniPlay = false;
          }
        });
      },
    );
  };
  onMounted(()=>{
    setTimeout(() => {
      nextTick(() => {
        guideFn();
      });
    }, 80);
  })
  
// 需要展示的区域  
<div
class="absolute bottom-0 h-56 scale-110 -translate-x-1/2 w-52 left-1/2 z-top"
id="GoodsCart"
></div>