lottie&vue 把json文件转动画

太过爱你忘了你带给我的痛 2023-01-20 04:00 17阅读 0赞

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

首先：安装lottile

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

<template>
        <div :style="style" ref="lavContainer"></div>
    </template>
    
    <script>
    import lottie from 'lottie-web'
    export default {
        props: {
          options: {
            type: Object,
            required: true
          },
        },
        data() {
          return {
            style: {
              width: this.options.width ? `${this.width}px` : '100%',
              height: this.options.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,
          }
          )
          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　,
                   width:300,
                   height:100
        　　　　　　},
    　　　　　　animationSpeed: 0.1
    　　　　}
    　　},
        methods: {
            thumbUp () {
                this.anim.play()
            },
            handleAnimation (anim) {
                this.anim = anim;
            }
        },
        destroyed () {
            this.animation.destroy()
        }
    }
    </script>

注意：json文件里的图片路径根据情况来修改