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 Effe