前端lottie使用指南

1、Ae导出json动画文件，大概就是安装两个插件，一个bodymovin，一个zxp installer。然后Ae进行简单配置，即可将动画生成一个json，一个images图片保存在本地

2、接下来我们使用vue-ui创建一个vue项目，然后下一个vue-lottie包。这个时候，引入外部插件，首先要全局注册。于是我们使用Vue.component('lottie', lottie)，全局注册一个lottie组件。

3、将Ae导出的json文件和images文件夹拖到assets文件夹下，去你想创建动画的页面，引入json文件，并将lottie组件进行引入。如下图。

4、获取动画播放状态，animCreated方法有如下关键词，用以监听动画播放的不同状态

5、至此，nom run dev只能看到动画，但就注意到图片基本都是丢失状态。因为在本地启动项目时，图片读取的路径都是如下

此时有两种解决办法 一个是修改json文件，先将文件转为js文件，然后将路径改为require路径，这样本地调试是可以看到图的，但由于修改json的成本比较大，所以并不推荐

另一个是，一键生成打包文件，然后在dist文件下查看，这个时候你会发现，图片依然找不到。莫慌！看下此时图片的路径是这样的

再看看我们的打包文件，一个images的影子都煤油，于是恍然大明白，来动动咱们的右手，将images拖进dist文件里。主要是本地引用路径问题。如果有更好的方法，欢迎留言～

至此，lottie在vue框架下的使用，就差不多了，如果想要更多效果，可以去lottie-web的源码查看～