前端lottie使用指南

时间:2024-05-20 19:46:02

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组件进行引入。如下图。

前端lottie使用指南

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

前端lottie使用指南

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

前端lottie使用指南

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

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

前端lottie使用指南

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

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