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

一、Lottie介紹

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

在項(xiàng)目運(yùn)用該庫的目的只有一個(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)那頁面下,可根據(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:@"首頁"]){

TagNum = 100;

jsonStr = @"data01.json";

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

TagNum = 101;

jsonStr = @"data02.json";

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

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比較簡單,邏輯也是比較清晰的。

https://github.com/jianyu7819/YCLottieTabBar歡迎大家??!

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容