iOS-基于lottie框架自定制實(shí)現(xiàn)YCTabBar

一、Lottie介紹

lottie是一個(gè)可以解析使用【bodymovin】插件從Adobe After Effects中導(dǎo)出的格式為 json 的文件,并在 iOS匆绣、Android聋呢、macOS、React Native 中進(jìn)行解析使用的開源庫(kù)鲸睛。

在項(xiàng)目運(yùn)用該庫(kù)的目的只有一個(gè)那就是颠猴,讓我們移動(dòng)端展示出的UI更加絢麗关划。雖然一些動(dòng)態(tài)的動(dòng)畫效果我們移動(dòng)端開發(fā)自身也能畫出來,但是耗費(fèi)的時(shí)間和精力是十分巨大的翘瓮。而借用lottie去解析由UI設(shè)計(jì)師bodymovin導(dǎo)出的json文件贮折,就可以輕松的完成。

當(dāng)然也有一些不足:要求系統(tǒng)版本在iOS8 及以上资盅,目前只能支持播放動(dòng)畫调榄,復(fù)雜的交互動(dòng)畫(特別需求有model數(shù)據(jù)交互)還不能支持!

二律姨、YCTabBar

借力@東東隆東搶提醒振峻,gif效果圖做出來了


下載地址https://github.com/jianyu7819/YCLottieTabBar

主要代碼是自定制YCtabBar臼疫,基于UIView

在YCTabBar.h中設(shè)置代理

@class YCTabBar;

@protocol YCTabBarDetagate<NSObject>

@optional-(void)tabBar:(YCTabBar *)tabBar didselectedButtonFrom:(int )from to: (int )to;

@end

@interface YCTabBar : UIView

@property(nonatomic,weak)iddelegate;

-(void)addTabBarButtonWithItem:(UITabBarItem *)item;

@end

這邊我設(shè)置的代理主要監(jiān)聽跳轉(zhuǎn)那頁(yè)面下择份,可根據(jù)需求自定制

api:-(void)addTabBarButtonWithItem:(UITabBarItem *)item;主要傳導(dǎo)過來tabbarcontroller的item數(shù)據(jù)

在YCTabBar.m中

主要在-(void)addTabBarButtonWithItem:(UITabBarItem *)item;API的實(shí)現(xiàn)和layoutSubviews中相應(yīng)button和LOTAnimationView的frame布局烫堤。

-(void)addTabBarButtonWithItem:(UITabBarItem *)item{

//1荣赶、創(chuàng)建按鈕 創(chuàng)建LOTAnimationView

NSString *jsonStr;

NSInteger TagNum;

if ([item.title isEqualToString:@"首頁(yè)"]){

TagNum = 100;

jsonStr = @"data01.json";

}else if ([item.title isEqualToString:@"動(dòng)態(tài)"]){

TagNum = 101;

jsonStr = @"data02.json";

}else if ([item.title isEqualToString:@"購(gòu)物車"]){

TagNum = 102;

jsonStr = @"data03.json";

}else{

TagNum = 103;

jsonStr = @"data04.json";

}

LOTAnimationView *aniView = [LOTAnimationView animationNamed:jsonStr];

aniView.tag = TagNum;

if (aniView.tag == 100) {

_selectedview = aniView;

}

[self addSubview:aniView];

YCTabBarButton *button=[[YCTabBarButton alloc]init];

[self addSubview:button];

//添加按鈕到數(shù)組中

[self.viewsArr addObject:aniView];

[self.tabBarButtons addObject:button];

//2、設(shè)置數(shù)據(jù)

button.item=item;

//3鸽斟、監(jiān)聽按鈕點(diǎn)擊

[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];

//4拔创、默認(rèn)選中第零個(gè)

if(self.tabBarButtons.count==1){[_selectedview play];[self buttonClick:button];}

}

由于篇幅,想了解的更多富蓄,直接github下載剩燥,demo比較簡(jiǎn)單,邏輯也是比較清晰的。

https://github.com/jianyu7819/YCLottieTabBar歡迎大家C鸷臁侣滩!

個(gè)人工作學(xué)習(xí)積累,分享~~

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末变擒,一起剝皮案震驚了整個(gè)濱河市君珠,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌娇斑,老刑警劉巖策添,帶你破解...
    沈念sama閱讀 218,640評(píng)論 6 507
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異毫缆,居然都是意外死亡唯竹,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,254評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門悔醋,熙熙樓的掌柜王于貴愁眉苦臉地迎上來摩窃,“玉大人,你說我怎么就攤上這事芬骄』福” “怎么了?”我有些...
    開封第一講書人閱讀 165,011評(píng)論 0 355
  • 文/不壞的土叔 我叫張陵账阻,是天一觀的道長(zhǎng)蒂秘。 經(jīng)常有香客問我,道長(zhǎng)淘太,這世上最難降的妖魔是什么姻僧? 我笑而不...
    開封第一講書人閱讀 58,755評(píng)論 1 294
  • 正文 為了忘掉前任,我火速辦了婚禮蒲牧,結(jié)果婚禮上撇贺,老公的妹妹穿的比我還像新娘。我一直安慰自己冰抢,他們只是感情好松嘶,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,774評(píng)論 6 392
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著挎扰,像睡著了一般翠订。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上遵倦,一...
    開封第一講書人閱讀 51,610評(píng)論 1 305
  • 那天尽超,我揣著相機(jī)與錄音,去河邊找鬼梧躺。 笑死似谁,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播巩踏,決...
    沈念sama閱讀 40,352評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼斜筐,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了蛀缝?” 一聲冷哼從身側(cè)響起顷链,我...
    開封第一講書人閱讀 39,257評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎屈梁,沒想到半個(gè)月后嗤练,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,717評(píng)論 1 315
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡在讶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,894評(píng)論 3 336
  • 正文 我和宋清朗相戀三年煞抬,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片构哺。...
    茶點(diǎn)故事閱讀 40,021評(píng)論 1 350
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡革答,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出曙强,到底是詐尸還是另有隱情残拐,我是刑警寧澤,帶...
    沈念sama閱讀 35,735評(píng)論 5 346
  • 正文 年R本政府宣布碟嘴,位于F島的核電站溪食,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏娜扇。R本人自食惡果不足惜错沃,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,354評(píng)論 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望雀瓢。 院中可真熱鬧枢析,春花似錦、人聲如沸刃麸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,936評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)嫌蚤。三九已至辐益,卻和暖如春断傲,著一層夾襖步出監(jiān)牢的瞬間脱吱,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,054評(píng)論 1 270
  • 我被黑心中介騙來泰國(guó)打工认罩, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留箱蝠,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,224評(píng)論 3 371
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像宦搬,于是被迫代替她去往敵國(guó)和親牙瓢。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,974評(píng)論 2 355

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