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

一、Lottie介紹

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

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

當(dāng)然也有一些不足:要求系統(tǒng)版本在iOS8 及以上,目前只能支持播放動畫,復(fù)雜的交互動畫(特別需求有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的實現(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:@"動態(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)聽按鈕點擊

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

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

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

}

由于篇幅,想了解的更多,直接github下載,demo比較簡單,邏輯也是比較清晰的。

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

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

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