vue lottie vue-lottie : 使用教程

本文以一个小机器人的动画为示例。

 

1.data.json文件目录：/src/assets/images/robot

 

 

 2.main.js

// lottie
import lottie from 'vue-lottie';
Vue.component('lottie', lottie);

 

 

3.写一个机器人动画的组件

<template>
    <lottie :options="defaultOptions" :height="70" :width="70" v-on:animCreated="handleAnimation" />
</template>

<script>
    import * as animationData from '../../../../assets/images/robot/data.json';  // 引入data.json
    animationData.assets.forEach((item) => {
        item.u = '';
        if (item.w && item.h) {
            item.p = require(`@/assets/images/robot/images/${item.p}`);
        }
    }); // 获取静态资源
    export default {
        name: "robotLottie",
        data() {
            return {
                defaultOptions: { animationData: animationData.default }, // 动画数据：注意是 .default
            }
        },
        props: [],
        computed: {},
        methods: {
            handleAnimation: function(anim) {
                this.anim = anim;
            },

            mounted() {}
        }
    }
</script>

<style lang="scss" scoped>
    .robot-lottie {}
</style>

 

 

4.在页面里使用3里的组件

<template>
    <div class="help-center-list">

         <robotLottie></robotLottie>
    </div>
</template>

<script>
    import { isApp, call_CS, exitWebView } from '../../../utils/common';
    import { Toast } from "vant";
    import robotLottie from '../components/robot-lottie/index.vue';  // 引入组件
    export default {
        name: "helpCenterList",
        data() {
            return {}
        },
        props: [],
        components: {
            'robotLottie': robotLottie, // 注入组件
        },
        computed: {},
        methods: {}
    }
</script>

<style lang="scss" scoped>
    .help-center-list {}
</style>