正好最近發(fā)現(xiàn)一個很好玩的組件碟摆,就和大家分享一下预厌。
這是一個動畫庫,由Airbnb產(chǎn)品攻谁,對稚伍,就是那個宣布放棄使用React Native的Airbnb,這讓我一個用RN做APP的很是尷尬戚宦。但是這個動畫庫還是很好用的个曙,名字叫Lottie,反正就是個名字受楼,也不知道什么意思垦搬,估計Airbnb的設計師叫Lottie吧。
這個東西本來是用在Android/ios的艳汽,Airbnb還特意做了個RN版本悼沿,不過本質上也是用的原生,所以差不多骚灸。其實流程很簡單糟趾,就是用AE做出動畫,用bodymovin插件把動畫導出成json甚牲,Lottie會解析這個json并且渲染出來义郑。看個官方的例子吧:
效果還是蠻不錯的丈钙,使用起來也很簡單非驮,具體可以去看官方文檔。
地址:https://github.com/react-community/lottie-react-native
好雏赦,那么問題來了劫笙,一個直男程序員芙扎,根本不懂設計,該怎么辦填大?去哪找個設計師幫忙做這個戒洼?要是能找到愿意幫忙做動畫的設計師,還能沒有女朋友允华?還用獨自一人gay里gay氣的望穿秋水嗎圈浇?
作為一個開源的組件,秉持著開源的精神靴寂,總有設計師們愿意分享自己的設計磷蜀。所以,記住這個網(wǎng)站百炬,不一定有用~
地址:https://www.lottiefiles.com/
當然褐隆,也許設計師做出來的東西的顏色不如你意,但那個json文件你還不會改剖踊,沒關系庶弃,記住這個地址,你可以隨便改顏色蜜宪。
地址:https://bodymovin-editor.firebaseapp.com/
最后,秉持著實踐出真知的原則祥山,我隨手做了個Toast組件圃验,放在了我的github上,有興趣的童鞋可以去看看缝呕,請多指教~
地址:https://github.com/GZY6173/Yagami-Design/tree/master/Toast
最后的最后澳窑,歡迎關注我~