记录一次vue里使用Lottie动画

故事开始

项目负责人找到我说让我快点出一个动画效果好的静态页面给客户，说UI都已经做完了，我看了下界面大部分都是要运动动画，我就说让他出一个动画文件嘛，都一脸懵逼，我就搬出这个Lottie，Lottie是使用 Adobe After Effects 设计出动画之后，使用 Lottie 提供的 Bodymovin 插件将设计好的动画导出成 JSON 格式,不想自己画就看下现成的 lottiefiles

开始使用

这里主要讲的是vue如何使用

安装依赖包 vue-lottie

npm install --save vue-lottie

在vue工程main引用注册

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

在使用的页面组件引入设计好的lottiefiles或者UI给你的AE生成的json

import animationData from "./lottie.json";

使用组件

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

在data里面添加相应属性

data(){
    return {
        defaultOptions: { animationData: animationData },
        animationSpeed: 1,
        anim: {}
    }
}

methods: {
    handleAnimation: function(anim) {
        this.anim = anim;
    }
}

来个栗子

写到最后还是给你们来个demo