Lottie简介
官方介绍：Lottie是一个库，可以解析使用AE制作的动画（需要用bodymovie导出为json格式）,支持web、ios、android、flutter和react native。在web端，lottie-web库可以解析导出的动画json文件，并将其以svg或者canvas的方式将动画绘制在我们的页面上.
Lottie的优点
- 动画由设计使用专业的动画制作工具AE来实现，使动画实现更加方便，且效果更好
- 前端可以方便的调用动画，并对动画进行控制，减少前端动画工作量
- 设计制作动画，前端展现动画，分工明确
- 使用lottie方案，json文件大小比gif文件小很多，性能也会更好
vue3为例使用、当前基本环境 vue3(^3.3.4) + vite(^4.3.9)
- 安装 lottie-web 包
npm install lottie-web
-
将 ui 设计师给的 lottie 动画的 json 文件放入 src 文件夹中
-
为 lottie 动画指定容器，并定义 anim 变量接收l
