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">{{ item.name }}</div>
    </div>
  </div>
</template>
<script>
import lottie from 'lottie-web';

import anima1 from './assets/data1.json';
import anima2 from './assets/data2.json';
import anima3 from './assets/data4.json';
import anima4 from './assets/data5.json';

export default {
  name: 'AppFooter',
  data() {
    return {
      active: 1,
      activePath: '/home',
      animationArr: [anima1, anima2, anima3, anima4],
      anim: null,
    };
  },
  computed: {
    tabList() {
      return [
        {
          name: '直播',
          path: '/video',
          icon: require('./assets/img/video.png'),
          // icon: 'video',
        },
        {
          name: '首页',
          path: '/home',
          icon: require('./assets/img/home.png'),
          // icon: 'home',
        },
        {
          name: '订单',
          path: '/order',
          icon: require('./assets/img/order.png'),
          // icon: 'order',
        },
        {
          name: '我的',
          path: '/person',
          icon: require('./assets/img/person.png'),
          // icon: 'person',
        },
        // ].map(item => {
        //   Object.assign(item, {
        //     icon: require(`./assets/img/${item.icno}.png`),
        //   });
        // });
      ];
    },
  },
  mounted() {
    this.aming(this.animationArr[this.active], this.active);
  },
  methods: {
    transferTab(item, index) {
      this.activePath = item.path;
      this.active = index;
      if (this.anim != null) {
      	// 判断是否已经渲染过了，渲染过则销毁再重新渲染一次
        this.anim.destroy();
      }
      this.aming(this.animationArr[this.active], this.active);
    },
    aming(data, i) {
      this.anim = lottie.loadAnimation({
        container: this.$refs[`animation${i}`][0], //渲染的容器
        renderer: 'svg', // 渲染方式:svg、canvas
        loop: false, //循环播放，默认：false
        autoplay: true, //自动播放 ，默认true
        animationData: data, //动画json
      });
    },
  },
};
</script>
<style scoped>
.tab-view {
  position: fixed;
  bottom: 0;
  height: 46px;
  width: 100%;
  background-color: rgba(245, 245, 245, 0.8);
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
}
.tab-view .tab-view-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.tab-view .tab-view-item .static-icon {
  width: 20px;
  height: 20px;
}
.tab-view-item .static-icon img {
  width: 100%;
  height: 100%;
}
</style>

我录屏转了GIF图片，但是GIF图片一直上传失败，效果录屏传B站上了，哈哈

效果预览

关于Lottie我也是第一次用，哪里不对的欢迎指正❤

Lottie-web的常用方法

anim .play(); // 播放，从当前帧开始播放

anim .stop(); // 停止，并回到第0帧

anim .pause(); // 暂停，并保持当前帧

anim .goToAndStop(value, isFrame); // 跳到某个时刻/帧并停止isFrame(默认false)指示value表示帧还是时间(毫秒)

anim .goToAndPlay(value, isFrame); // 跳到某个时刻/帧并进行播放

anim .goToAndStop(30, true); // 跳转到第30帧并停止

anim .goToAndPlay(300); // 跳转到第300毫秒并播放

anim .playSegments(arr, forceFlag); // arr可以包含两个数字或者两个数字组成的数组，forceFlag表示是否立即强制播放该片段

anim .playSegments([10,20], false); // 播放完之前的片段，播放10-20帧

anim .playSegments([[0,5],[10,18]], true); // 直接播放0-5帧和10-18帧

anim .setSpeed(speed); // 设置播放速度，speed为1表示正常速度

anim .setDirection(direction); // 设置播放方向，1表示正向播放，-1表示反向播放

anim .destroy(); // 删除该动画，移除相应的元素标签等。在unmount的时候，需要调用该方法

Lottie-web 常用的事件

• data_ready：动画数据加载完毕

// Example
anim .addEventListener('data_ready', () => {
 console.log('animation data has loaded'); 
});

• config_ready：完成初始配置后
• data_failed：当无法加载动画的一部分时
• loaded_images：当所有图像加载成功或错误时
• DOMLoaded：将元素添加到DOM时