vue-lottie加载json动画

为什么用

针对目前页面的一些设计样式，为了达到一定的视觉效果，难免会有一些动态效果的情况，一般首先想到的是动图，gif或者apng 但是动态图的帧数越多 图片越大 加载也就会更慢。
于是就有一种将动画数据导出json的形式加载到页面中。优点诸多

1.文件非常小，通常以json加载到页面中，加载更快
2.可以前进，后退，是否循环播放动画等，最重要的是可以对动画进行编程以响应手动操作的一些交互。
3.支持好，目前支持实体，形状图层，蒙版，alpha遮罩，修剪路径和虚线图案，效果会更好

怎么用

1.安装

npm install --save vue-lottie

2.引用

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

3.引入动画json

const animationData = require('@/assets/animate/data.json')

4.引入lottie插件

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

5.添加属性和方法

//1.data里面加上defaultOptions的属性，参数是animationData 就是动画资源json
data(){
    return {
        defaultOptions: { animationData: animationData,loop:true,},
        animObj: {} //动画对象，可进行前进后退等操作
    }
}
//2.methods中添加创建好之后的回调handleAnimation方法
methods: {
    handleAnimation: function(animate) {
        this.animObj= animate;
        console.log(animate); //这里可以看到 lottie 对象的全部属性
    },
} 

以上操作即可在页面加载出动画效果
有两个小坑，亲踩过的，此处顺提一下

1.引入json的时候 用的是require 而不是import , import引入的话json动画无法显示出来。
	具体原因可以去查下import和require的区别
2,json对象里面的图片地址是针对服务器项目目录的，
	默认是images目录，可修改，图片目录需要放置在项目根目录下

vue-lottie具体说明可查git地址 https://github.com/chenqingspring/vue-lottie