在vue里添加的lottie动画

​Lottie的官网：https://lottiefiles.com

什么是Lottie？
Lottie是一个iOS，Android和React Native库，可以实时渲染After Effects动画，允许应用程序像使用静态图像（在这里动画被转化成json文件）一样轻松使用动画。网上也有丰富的动画资源可供我们选择
Lottiefiles

为什么Lottie？

1. 灵活的After Effects功能
   我们目前支持实体，形状图层，蒙版，alpha遮罩，修剪路径和虚线图案。我们将定期添加新功能。
2. 以你喜欢的方式操作动画
   可以前进，后退，并且最重要的是你可以对动画进行编程以响应任何交互。
3. 文件小
   文件非常小，通常可以以json文件的形式存在，可以通过json api来加载。
   使用Lottie
   我们在vue中可以使用# chenqingspring/vue-lottie 来引入Lottie
   安装vue-lottie包
   npm install --save vue-lottie
   引用vue-lottie
   在main.js引入并全局注册组件
   import lottie from ‘vue-lottie’;
   Vue.component(‘lottie’, lottie)
   引入Lottie动画资源
   将我们在Lottiefiles下载下来的相应动画资源保存到项目中并映入
   // 第一步：script中引入资源
   import * as animationData from “…/assets/lottie/loading.json”;
   // 第二步：使用组件
   
   // 第三步：data里面添加相应属性
   data(){
   return {
   defaultOptions: {
   animationData: animationData.default //这一行切记用这个不要用animationData: animationData，不然会报错
   }
   animationSpeed: 1,
   anim: {}
   }
   }

//第四步：定义方法
methods: {
handleAnimation: function(anim) {
this.anim = anim;
console.log(anim); //这里可以看到 lottie 对象的全部属性
},
}
之后动画就被引入成功了，详细的使用方法请看vue-lottie

注：如果在使用lottie有问题的话可以一起留言探讨，亲试已成功