什么是Lottie

Lottie是一个可以通过bodymovin插件来解析Adobe After Effects动画，并生成json格式的文件。该json文件可以通过Lottie开源库在iOS,Android,macOS,React Native中进行解析生成动画效果。

下面是一些官网给出的动画效果：

为什么使用Lottie?

一直以来我们的设计同学都是使用设计软件，设计动画效果，开发同学再通过代码来实现动效。对于复杂的动画，开发同学要用很长的时间来实现，并且还有可能无法达到设计同学的最初的效果。

还有一种实现动画的方式就是gif图。然而Android并不支持gif图，而且gif图对于移动端还有占用过多空间的问题。

那么，Lottie为我们做了什么呢。

首先，设计同学在Adobe After Effects上设计了动画效果，通过bodymovin插件，可以将动画导出成一个json文件。

然后，开发同学就可以通过Lottie将前面生成的json文件渲染成动画效果。

这样就可以高效的实现很多复杂动画效果啦。

在vuejs中使用Lottie

对于现在十分流行的前端框架vuejs，当然有支持Lottie的组件。

vue-lottie是一个基于vuejs的动画效果实现组件。它基于lottie开源项目，可以将After Effects导出的json文件渲染成svg/canvas/html动画效果。

vue-lottie安装

通过NPM安装

npm install --save vue-lottie

vue-lottie使用