什么是Lottie ?

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

Lottie

Lottie介绍

  1. 灵活的After Effects功能
    我们目前支持实体，形状图层，蒙版，alpha遮罩，修剪路径和虚线图案。我们将定期添加新功能。
  2. 以你喜欢的方式操作动画
    可以前进，后退，并且最重要的是你可以对动画进行编程以响应任何交互。
  3. 文件小
    文件非常小，通常可以以json文件的形式存在，可以通过json api来加载。

如何使用Lottie


安装vue-lottie包

1
npm install --save vue-lottie

在main.js引入并全局注册组件

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

或者 在需要的组件里面引入并注册组件

1
2
3
4
5
import Lottie from 'vue-lottie/src/lottie.vue'

components:{
  Lottie
},

引入Lottie动画资源

将我们在Lottiefiles下载下来的相应动画资源保存到项目中并映入

  • 在需要使用的组件里引用lottie动画的json文件
1
import * as animationData from "../assets/lottie/loading.json";
  • 使用组件
1
<lottie :options="defaultOptions" :height="200" :width="200" v-on:animCreated="handleAnimation" />
  • data里面添加相应属性
1
2
3
4
5
data(){
    return {
        defaultOptions: { animationData: animationData..default },
    }
}
  • 定义方法
1
2
3
4
5
6
methods: {
    handleAnimation: function(anim) {
        this.anim = anim;
        console.log(anim); //这里可以看到 lottie 对象的全部属性
    },
}

最后就能得到json文件的动画效果:
404