无星的前端之旅（二）-vue 使用 lottie

背景：

最近在写vue，使用的是nuxt框架做ssr。css属实有点难搞，ui又想让我做动画，说要好看，要酷，要炫。属实有点要命。

没办法，我只能搪塞到：“你看看lottie，这个比较简单，比较方便，我也不用写很多代码，你也能看到你想要的效果”。当时UI就答应了，表示回去研究研究。

其实我也没用过，当时想的是，等你研究完估计就得明年了。谁知道不到两个星期，ae就导出json就给我了，怎么效率这么高。。。

一.引入lottie

看了半天，怎么都说用vue-lottie，这玩意也不是官方的拓展啊，莫名觉得心里不靠谱，不太想用（写rn的时候也是，想用echarts,发现没有，只好自己桥接了一个）。再看看，官方不是有lottie-web么，用就完事了。

1	yarn add lottie-web

引入完毕

二.纯json使用

属实简单，但是这里有些不一样的地方。先上代码,style我直接省略了。

<!--loading-->
<template>
  <div v-show="showloading" class="main">
    <div id="money" class="loading" />
  </div>
</template>

<script>
import lottie from 'lottie-web'
import datajson from '@/assets/lottie/withdraw/data.json'
export default {
  components: {},
  data: () => ({
    showloading: true,
  }),
  computed: {},
  watch: {},
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const icon = document.getElementById('money')
      lottie.loadAnimation({
        container: icon, // 包含动画的dom元素
        renderer: 'svg', // 渲染出来的是什么格式
        loop: true, // 循环播放
        autoplay: true, // 自动播放
        animationData: datajson, // 动画json的路径
      })
    },
    show() {
      this.showloading = true
      lottie.play()
    },
    hidden() {
      this.showloading = false
      lottie.stop()
    },
  },
}
</script>