一、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軟件，如下圖所示。