正好最近發(fā)現(xiàn)一個很好玩的組件,就和大家分享一下。
這是一個動畫庫,由Airbnb產(chǎn)品,對,就是那個宣布放棄使用React Native的Airbnb,這讓我一個用RN做APP的很是尷尬。但是這個動畫庫還是很好用的,名字叫Lottie,反正就是個名字,也不知道什么意思,估計Airbnb的設(shè)計師叫Lottie吧。
這個東西本來是用在Android/ios的,Airbnb還特意做了個RN版本,不過本質(zhì)上也是用的原生,所以差不多。其實流程很簡單,就是用AE做出動畫,用bodymovin插件把動畫導(dǎo)出成json,Lottie會解析這個json并且渲染出來。看個官方的例子吧:

效果還是蠻不錯的,使用起來也很簡單,具體可以去看官方文檔。
地址:https://github.com/react-community/lottie-react-native
好,那么問題來了,一個直男程序員,根本不懂設(shè)計,該怎么辦?去哪找個設(shè)計師幫忙做這個?要是能找到愿意幫忙做動畫的設(shè)計師,還能沒有女朋友?還用獨(dú)自一人gay里gay氣的望穿秋水嗎?
作為一個開源的組件,秉持著開源的精神,總有設(shè)計師們愿意分享自己的設(shè)計。所以,記住這個網(wǎng)站,不一定有用~
地址:https://www.lottiefiles.com/
當(dāng)然,也許設(shè)計師做出來的東西的顏色不如你意,但那個json文件你還不會改,沒關(guān)系,記住這個地址,你可以隨便改顏色。
地址:https://bodymovin-editor.firebaseapp.com/
最后,秉持著實踐出真知的原則,我隨手做了個Toast組件,放在了我的github上,有興趣的童鞋可以去看看,請多指教~
地址:https://github.com/GZY6173/Yagami-Design/tree/master/Toast
最后的最后,歡迎關(guān)注我~
