一、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í)積累,分享~~