不知道大家有沒(méi)有這樣的困擾，每次制作GIF圖的時(shí)候，難免會(huì)出現(xiàn)邊緣鋸齒，就算加上白邊之后，在夜晚模式的時(shí)候鋸齒就更明顯了。除此之外，GIF圖對(duì)于漸變填充的呈現(xiàn)也很糟糕，會(huì)出現(xiàn)漸變斷層的情況，看起來(lái)很不自然。
稍微把動(dòng)畫(huà)做流暢一些，GIF的文件大小就變得巨大無(wú)比。
在2017年的時(shí)候，一款比GIF動(dòng)畫(huà)更好用的動(dòng)畫(huà)圖片格式誕生了?。?！
那就是我們今天將要介紹的Lottie動(dòng)畫(huà)。
Lottie動(dòng)畫(huà)是一種基于 JSON 的動(dòng)畫(huà)文件格式，允許在任何平臺(tái)上發(fā)送動(dòng)畫(huà)，就像發(fā)送圖片一樣輕松。Lottie是可在任何設(shè)備上運(yùn)行的小文件，并且可以放大或縮小而不會(huì)出現(xiàn)鋸齒的一種動(dòng)畫(huà)格式。
相較于其他動(dòng)圖格式，Lottie有哪些優(yōu)點(diǎn)？
和GIF、Apng 或 MP4 等其他格式相比，Lottie 動(dòng)畫(huà)要小得多，同時(shí)保持相同的動(dòng)畫(huà)表現(xiàn)，甚至更流暢。
Lottie動(dòng)畫(huà)是基于矢量設(shè)計(jì)制作的，這意味著可以隨意放大或縮小它們，而不必?fù)?dān)心分辨率的大小導(dǎo)致的鋸齒問(wèn)題。放大無(wú)數(shù)倍也是清晰如初。
對(duì)于所有開(kāi)發(fā)人員來(lái)說(shuō)，Lottie動(dòng)畫(huà)的交接非常簡(jiǎn)單?，F(xiàn)在我們可以在 iOS、Android、Web 和 React Native 上使用 Lottie 動(dòng)畫(huà)，也不需要修改。使用和調(diào)用都非常方便。
在 Lottie 動(dòng)畫(huà)中，動(dòng)畫(huà)元素可以設(shè)計(jì)為可交互組件，用戶可以操縱它們進(jìn)行交互，實(shí)現(xiàn)滾動(dòng)、單擊和懸停等交互效果。這是GIF、Apng和MP4等動(dòng)畫(huà)文件都沒(méi)辦法做到的。
怎么設(shè)計(jì)制作Lottie動(dòng)畫(huà)呢？
目前，Lottie官網(wǎng)提供了很多動(dòng)效設(shè)計(jì)軟件的插件供大家使用和下載。目前下面這些設(shè)計(jì)軟件可以在官網(wǎng)下載到Lottie動(dòng)畫(huà)的導(dǎo)出插件。
其中，Lottie Creator是Lottie官方的網(wǎng)頁(yè)版動(dòng)畫(huà)制作工具，登錄官網(wǎng)就可以使用。
Lottie官網(wǎng)地址
https://lottiefiles.com
說(shuō)了這么多Lottie的優(yōu)點(diǎn)，其實(shí)Lottie也是有短板的。比如說(shuō)，AE里面的fx效果，Lottie就全部不支持，另外復(fù)合路徑動(dòng)畫(huà)等等動(dòng)效效果也不支持。
為了方便大家快速上手Lottie動(dòng)畫(huà)，作者把Lottie支持的效果整理歸類成了幾張圖片，方便大家制作的時(shí)候快速查閱。
作者：江浩大叔工作室
鏈接：https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
來(lái)源：站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。
