React Native的一個動畫庫lottie

正好最近發(fā)現(xiàn)一個很好玩的組件碟摆,就和大家分享一下预厌。

這是一個動畫庫,由Airbnb產(chǎn)品攻谁,對稚伍,就是那個宣布放棄使用React Native的Airbnb,這讓我一個用RN做APP的很是尷尬戚宦。但是這個動畫庫還是很好用的个曙,名字叫Lottie,反正就是個名字受楼,也不知道什么意思垦搬,估計Airbnb的設計師叫Lottie吧。

這個東西本來是用在Android/ios的艳汽,Airbnb還特意做了個RN版本悼沿,不過本質上也是用的原生,所以差不多骚灸。其實流程很簡單糟趾,就是用AE做出動畫,用bodymovin插件把動畫導出成json甚牲,Lottie會解析這個json并且渲染出來义郑。看個官方的例子吧:

example

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

地址: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

最后的最后澳窑,歡迎關注我~

公眾號
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市供常,隨后出現(xiàn)的幾起案子摊聋,更是在濱河造成了極大的恐慌,老刑警劉巖栈暇,帶你破解...
    沈念sama閱讀 212,029評論 6 492
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件麻裁,死亡現(xiàn)場離奇詭異,居然都是意外死亡源祈,警方通過查閱死者的電腦和手機煎源,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,395評論 3 385
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來香缺,“玉大人手销,你說我怎么就攤上這事⊥颊牛” “怎么了锋拖?”我有些...
    開封第一講書人閱讀 157,570評論 0 348
  • 文/不壞的土叔 我叫張陵诈悍,是天一觀的道長。 經(jīng)常有香客問我兽埃,道長侥钳,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,535評論 1 284
  • 正文 為了忘掉前任讲仰,我火速辦了婚禮慕趴,結果婚禮上,老公的妹妹穿的比我還像新娘鄙陡。我一直安慰自己冕房,他們只是感情好,可當我...
    茶點故事閱讀 65,650評論 6 386
  • 文/花漫 我一把揭開白布趁矾。 她就那樣靜靜地躺著耙册,像睡著了一般。 火紅的嫁衣襯著肌膚如雪毫捣。 梳的紋絲不亂的頭發(fā)上详拙,一...
    開封第一講書人閱讀 49,850評論 1 290
  • 那天,我揣著相機與錄音蔓同,去河邊找鬼饶辙。 笑死,一個胖子當著我的面吹牛斑粱,可吹牛的內(nèi)容都是我干的弃揽。 我是一名探鬼主播,決...
    沈念sama閱讀 39,006評論 3 408
  • 文/蒼蘭香墨 我猛地睜開眼则北,長吁一口氣:“原來是場噩夢啊……” “哼矿微!你這毒婦竟也來了?” 一聲冷哼從身側響起尚揣,我...
    開封第一講書人閱讀 37,747評論 0 268
  • 序言:老撾萬榮一對情侶失蹤涌矢,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后快骗,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體娜庇,經(jīng)...
    沈念sama閱讀 44,207評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,536評論 2 327
  • 正文 我和宋清朗相戀三年方篮,在試婚紗的時候發(fā)現(xiàn)自己被綠了思灌。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 38,683評論 1 341
  • 序言:一個原本活蹦亂跳的男人離奇死亡恭取,死狀恐怖泰偿,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情蜈垮,我是刑警寧澤耗跛,帶...
    沈念sama閱讀 34,342評論 4 330
  • 正文 年R本政府宣布裕照,位于F島的核電站,受9級特大地震影響调塌,放射性物質發(fā)生泄漏晋南。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,964評論 3 315
  • 文/蒙蒙 一羔砾、第九天 我趴在偏房一處隱蔽的房頂上張望负间。 院中可真熱鬧,春花似錦姜凄、人聲如沸政溃。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,772評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽董虱。三九已至,卻和暖如春申鱼,著一層夾襖步出監(jiān)牢的瞬間愤诱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 32,004評論 1 266
  • 我被黑心中介騙來泰國打工捐友, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留淫半,地道東北人。 一個月前我還...
    沈念sama閱讀 46,401評論 2 360
  • 正文 我出身青樓匣砖,卻偏偏與公主長得像科吭,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子脆粥,可洞房花燭夜當晚...
    茶點故事閱讀 43,566評論 2 349

推薦閱讀更多精彩內(nèi)容

  • 用兩張圖告訴你砌溺,為什么你的 App 會卡頓? - Android - 掘金 Cover 有什么料影涉? 從這篇文章中你...
    hw1212閱讀 12,699評論 2 59
  • 前沿 該文章主要介紹了 Lottie是什么变隔,如何為 Lottie 制作動畫,以及 Lottie的應用場景蟹倾。適合設計...
    York_魚閱讀 21,802評論 8 171
  • 瀟瀟雨歇落地黃 片片風情入夢鄉(xiāng) 千秋萬載莫如此 萬載千秋本自然
    紅塵佛門閱讀 560評論 3 15
  • 他今天也在匣缘。 徐夢華的日子一直過得有些恍惚。只要是過去了的時光鲜棠,于她而言肌厨,都是一團模糊的光影,分不清楚什么豁陆。 ...
    檀央閱讀 371評論 1 2
  • 圣杯組的宮廷人物牌柑爸。圣杯是小阿卡那中的第二組牌。代表水元素盒音,主旨情感表鳍。 (從78張牌中抽认诙) 日運解讀 對過去的事...
    夏天米斯特閱讀 3,271評論 0 2