React Native的乙個動畫庫lottie

2021-09-11 10:13:10 字數 512 閱讀 8562

正好最近發現乙個很好玩的元件,就和大家分享一下。

這個東西本來是用在android/ios的,airbnb還特意做了個rn版本,不過本質上也是用的原生,所以差不多。其實流程很簡單,就是用ae做出動畫,用bodymovin外掛程式把動畫匯出成json,lottie會解析這個json並且渲染出來。看個官方的例子吧:

效果還是蠻不錯的,使用起來也很簡單,具體可以去看官方文件。

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

作為乙個開源的元件,秉持著開源的精神,總有設計師們願意分享自己的設計。所以,記住這個**,不一定有用~

當然,也許設計師做出來的東西的顏色不如你意,但那個json檔案你還不會改,沒關係,記住這個位址,你可以隨便改顏色。

最後,秉持著實踐出真知的原則,我隨手做了個toast元件,放在了我的github上,有興趣的童鞋可以去看看,請多指教~

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

React Native 第乙個示例

使用下面的命令 npm install g react native cli react native init awesomeproject 生成乙個名為awesomeproject的專案,輸入 cd awesomeproject react native run android 可以讓專案工程執...

第乙個react native工程,簡單點

推薦乙個學習react native的好 是將react native在github上面的文章翻譯過來的中文 挺適合乙個入門react native的人學習,學的時候最好選擇最新的學習,我選擇的是0.39版本。附上截圖 也沒啥好講的,自己也是剛學沒幾天,就當做個筆記吧。修改的是index.andro...

React 寫乙個 spinner 圓形載入動畫

不支援ie和firefox,支援webkit瀏覽器。注意,在現代瀏覽器中需要使用 webkit 字首。geometry values clip path inset 100px 50px clip path circle 50px at 0 100px clip path polygon 50 0 ...