比GIF更好用的Lottie動畫是什么?

2024-5-17    前端達(dá)人

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


作者:江浩大叔工作室
鏈接:https://www.zcool.com.cn/article/ZMTYxODY4MA==.html
來源:站酷
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請注明出處。

分享本文至:

日歷

鏈接

個人資料

存檔