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>