vue项目中使用 lottie-web 实现tab栏点击动效

产品新需求 — tab栏点击的时候添加动态效果，UI设计师给了几个json文件，说，app 那边可以用json做动画，你们H5能不能，然后给我发了个网址，网上查了下，要用Lottie

Lottie介绍

Lottie是一个用于Android，iOS，Web和Windows的库，用于解析使用Bodymovin导出为json的Adobe After Effects动画，并在移动设备和网络上呈现它们！

一、安装 Lottie

npm install lottie-web

二、引入

import lottie from 'lottie-web';

三、使用

this.anim = lottie.loadAnimation({
   
  container: this.$refs[`animation${
     i}`][0], //渲染的容器
  renderer: 'svg', // 渲染方式:svg、canvas
  loop: false, //循环播放，默认：false
  autoplay: true, //自动播放 ，默认true
  animationData: data, //动画json
});

四、完整的代码

<template>
  <div class="tab-view">
    <div
      class="tab-view-item"
      v-for="(item, index) in tabList"
      :key="item.name"
      @click="transferTab(item, index)"
    >
      <div
        v-show="item.path === activePath"
        class="animation-icon"
        :ref="'animation' + index"
        style="width: 30px; height: 30px"
      ></div>
      <div v-show="item.path !== activePath" class="static-icon">
        <img :src="item.icon" alt="" />
      </div>
      <div class="title">{