lottie&vue 把json文件转动画

佚名 6年前 (2019-04-26) 随笔 852人围观抢沙发百度已收录

# with npm npm install lottie-web # with bower bower install bodymovin

https://www.npmjs.com/package/lottie-web

首先：安装lottile

SRE实战互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

其次：新建一个lottie.vue 页面

<template>
    <div :style="style" ref="lavContainer"></div>
</template>

<script>
import lottie from 'lottie-web'
export default {
    props: {
      options: {
        type: Object,
        required: true
      },
      height: Number,
      width: Number
    },
    data() {
      return {
        style: {
          width: this.width ? `${this.width}px` : '100%',
          height: this.height ? `${this.height}px` : '100%',
          overflow: 'hidden',
          margin: '0 auto'
        }
      }
    },
    mounted() {
      this.anim = lottie.loadAnimation({
        container: this.$refs.lavContainer,
        renderer: 'svg',
        loop: this.options.loop !== false,
        autoplay: this.options.autoplay !== false,
        animationData: this.options.animationData,
        rendererSettings: this.options.rendererSettings
      }
      )
      this.$emit('animCreated', this.anim)
    }
  }
</script>

最后：在动画页面引入文件

<template>
    <div class="thumb_animation">
      <lottie :options="defaultOptions" v-on:animCreated="handleAnimation"/>
    </div>
</template>
<script>
import Lottie from './lottie.vue';
import animationData from '../static/img/index' // 引入json文件
export default {
　　props: ['learning'],
　　components: {
　　　　'lottie': Lottie
　　},
　　data () {
　　　　return {
　　　　　　thumb_animation: false,
　　　　　　defaultOptions: {
　　　　　　　　animationData: animationData,
　　　　　　　　autoplay: false,
　　　　　　　　loop: false　
　　　　　　},
　　　　　　animationSpeed: 0.1
　　　　}
　　},
    methods: {
        thumbUp () {
            this.anim.play()
        },
        handleAnimation (anim) {
            this.anim = anim;
        }
    },
    destroyed () {
        this.animation.destroy()
    }
}
</script>