Lottie是一個(gè)支持Web和iOSAndroid平臺(tái)的移動(dòng)庫，專門用于解析Adobe After Effects動(dòng)畫，通過Bodymovin導(dǎo)出為JSON文件，直接在移動(dòng)設(shè)備上呈現(xiàn)動(dòng)畫效果這一創(chuàng)新使得設(shè)計(jì)師可以在獨(dú)立環(huán)境中完成動(dòng)畫設(shè)計(jì)，而開發(fā)團(tuán)隊(duì)僅需像引用圖片一樣集成動(dòng)畫資源，大大提升了設(shè)計(jì)與開發(fā)的協(xié)同效率Lottie的引入，意味著設(shè)計(jì)。

實(shí)現(xiàn)一個(gè)Lottie動(dòng)畫的關(guān)鍵在于理解JSON文件的數(shù)據(jù)結(jié)構(gòu)與內(nèi)容Lottie的動(dòng)畫JSON模板可以訪問lottiefilescom獲取JSON數(shù)據(jù)結(jié)構(gòu)通常包括全局信息圖層相關(guān)信息以及屬性變化信息等部分全局信息與幀率幀數(shù)等參數(shù)密切相關(guān)，例如，一個(gè)0至6秒的動(dòng)畫在30fps的幀率下相當(dāng)于180幀圖層相關(guān)信息則對(duì)應(yīng)于動(dòng)畫中的具體。

動(dòng)畫制作設(shè)計(jì)師使用Adobe After Effects并安裝Bodymovin插件來創(chuàng)建動(dòng)畫Windows用戶需額外下載ExMan Command Line tool和bodymovin插件，將AE項(xiàng)目導(dǎo)出為json文件這個(gè)文件包含了動(dòng)畫的關(guān)鍵幀和路徑信息引入Lottie庫在Android項(xiàng)目中，通過添加依賴將Lottie庫引入加載動(dòng)畫文件將json動(dòng)畫文件放置在項(xiàng)目的asse。