给你的Vue项目加上炫酷的动画

Posted 2021-04-16 前端格仔衫

平时在App或者一些设计稿中我们可以看到有些十分炫酷的动画，那么我们的Vue项目中是否也可以实现类似的效果呢？今天我给大家分享一个vue的动画库，vue-lottie，简单快捷实现好看的动画组件。

Lottie是什么？

 [ Lottie](http://airbnb.design/lottie/)是一个ios，android和React Native库，可以实时渲染After Effects动画，并且允许本地app像静态资源那样轻松地使用动画。Lottie使用名为[Bodymovin](https://github.com/bodymovin/bodymovin)的开源After Effects的扩展程序导出的JSON文件格式的动画数据。简单来说就是利用一个json格式的动画数据来渲染到页面上，就是这么简单。

Lottie怎么用

1. 通过npm/yarn安装

   // npm   npm install --save vue-lottie   // yarn   yarn add vue-lottie

2. 引入到项目中，可以全局也可以单个组件

   

import Lottie from 'vue-lottie' 

 // DOM <lottie :options="defaultOptions" :height="400" :width="400" v-on:animCreated="handleAnimation"/>  // Script import * as animationData from './assets/XXXXXX.json' export default { data () { return { defaultOptions: { animationData: animationData }, animationSpeed: 1, anim: {} } }, methods: { handleAnimation (anim) { this.anim = anim } } }

具体实现效果如下：