React Native的一個動畫庫lottie

正好最近發現一個很好玩的組件,就和你們分享一下。react

這是一個動畫庫,由Airbnb產品,對,就是那個宣佈放棄使用React Native的Airbnb,這讓我一個用RN作APP的非常尷尬。可是這個動畫庫仍是很好用的,名字叫Lottie,反正就是個名字,也不知道什麼意思,估計Airbnb的設計師叫Lottie吧。ios

這個東西原本是用在Android/ios的,Airbnb還特地作了個RN版本,不過本質上也是用的原生,因此差很少。其實流程很簡單,就是用AE作出動畫,用bodymovin插件把動畫導出成json,Lottie會解析這個json而且渲染出來。看個官方的例子吧:git

example

效果仍是蠻不錯的,使用起來也很簡單,具體能夠去看官方文檔。程序員

地址:github.com/react-commu…github

好,那麼問題來了,一個直男程序員,根本不懂設計,該怎麼辦?去哪找個設計師幫忙作這個?要是能找到願意幫忙作動畫的設計師,還能沒有女友?還用獨自一人gay裏gay氣的望穿秋水嗎?json

做爲一個開源的組件,秉持着開源的精神,總有設計師們願意分享本身的設計。因此,記住這個網站,不必定有用~react-native

地址:www.lottiefiles.com/app

固然,也許設計師作出來的東西的顏色不如你意,但那個json文件你還不會改,不要緊,記住這個地址,你能夠隨便改顏色。動畫

地址:bodymovin-editor.firebaseapp.com/網站

最後,秉持着實踐出真知的原則,我隨手作了個Toast組件,放在了個人github上,有興趣的童鞋能夠去看看,請多指教~

地址:github.com/GZY6173/Yag…

最後的最後,歡迎關注我~

公衆號
相關文章
相關標籤/搜索