上午聽(tīng)到同事說(shuō)起維護(hù)之前項(xiàng)目，解決線替換線上項(xiàng)目的序列幀動(dòng)畫的問(wèn)題。

每逢節(jié)日想在app中感受到節(jié)日氣氛，之前都是UI把多張圖片給我們，然后前端用序列幀動(dòng)畫的方式實(shí)現(xiàn)。

節(jié)日這么多，那每次為了這個(gè)動(dòng)畫都要發(fā)布新版本，辦法很笨。

剛好前不久出現(xiàn)了這么一個(gè)開(kāi)源項(xiàng)目，恰到好處的解決了這個(gè)問(wèn)題。

設(shè)計(jì)師只需要用AE把動(dòng)畫效果做出來(lái)，再用Bodymovin（插件）把動(dòng)畫倒出為json文件，給到后臺(tái)，后臺(tái)傳給前端，前端使用Lottie就可簡(jiǎn)易的實(shí)現(xiàn)動(dòng)畫效果。

筆者是用cocoapods管理三方的，新建工程加入‘lottie-ios’之后，便可以使用了。

幾行代碼實(shí)現(xiàn)動(dòng)效，比之前省里很多。

這是json文件的內(nèi)容

把json文件拖到工程里，引入框架，創(chuàng)建視圖就可以了。

代碼實(shí)現(xiàn)

里面還有很多屬性和方法，支持本地和遠(yuǎn)端。熟練使用還需探索。

動(dòng)效