Vue 3中使用 Lottie 动画
一、Lottie动画简介
Lottie是由Airbnb开源的面向Android、iOS、Web和Windows的动画库，开发者可以使用它在Web、iOS、Android等平台上实现高性能的体验丰富的矢量动画。
在早期的前端开发中，Flash是网页动画之王，不过它的规范约束随意，造成很多时设计出来的产品都无法符合用户体验要求。随着Flash动画的消失，HTML网页开发的主流技术，成为前端开发的技术标准，不过在HTML网页上进行动画开发其成本也是相当高的。事实上，除了开发成本和技术难点外，开发的动画还可能会出现与设计稿相差甚远，而Lottie动画的出现就很好的解决了这一问题。
早在2015年，Hernan Torrisi就提出了在AE中导出动画的想法，并且使用他创建的Bodymovin插件，能够很容易地导出JSON描述的动画，同时还发布了史上第一个支持JSON格式动画的渲染器。
2017年，Airbnb的工程师看到了基于JSON格式动画的潜力，于是编写了可以渲染JSON文件的iOS和Android库，并且扩展到Web和Windows，他们将这个库称为Lottie。同时，为了方便其他开发者，Airbnb还打造一个技术社区，开发者可以在Airbnb平台上传、下载和交易动画。
在使用流程上，开发Lottie动画需要先使用Adobe After Effects做出原动画，然后再使用Bodymovin插件把动画导出成JSON文件，而这个JSON文件就是Lottie需要解析的动画源文件。所以，制作Lottie动画需要先下载Adobe After Effects软件，如下图所示。