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>