一、Lottie介绍
lottie是一个可以解析使用【bodymovin】插件从Adobe After Effects中导出的格式为 json 的文件,并在 iOS、Android、macOS、React Native 中进行解析使用的开源库。
在项目运用该库的目的只有一个那就是,让我们移动端展示出的UI更加绚丽。虽然一些动态的动画效果我们移动端开发自身也能画出来,但是耗费的时间和精力是十分巨大的。而借用lottie去解析由UI设计师bodymovin导出的json文件,就可以轻松的完成。
当然也有一些不足:要求系统版本在iOS8 及以上,目前只能支持播放动画,复杂的交互动画(特别需求有model数据交互)还不能支持!
二、YCTabBar
借力@东东隆东抢提醒,gif效果图做出来了
下载地址https://github.com/jianyu7819/YCLottieTabBar
主要代码是自定制YCtabBar,基于UIView
在YCTabBar.h中设置代理
@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
这边我设置的代理主要监听跳转那页面下,可根据需求自定制
api:-(void)addTabBarButtonWithItem:(UITabBarItem *)item;主要传导过来tabbarcontroller的item数据
在YCTabBar.m中
主要在-(void)addTabBarButtonWithItem:(UITabBarItem *)item;API的实现和layoutSubviews中相应button和LOTAnimationView的frame布局。
-(void)addTabBarButtonWithItem:(UITabBarItem *)item{
//1、创建按钮 创建LOTAnimationView
NSString *jsonStr;
NSInteger TagNum;
if ([item.title isEqualToString:@"首页"]){
TagNum = 100;
jsonStr = @"data01.json";
}else if ([item.title isEqualToString:@"动态"]){
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];
//添加按钮到数组中
[self.viewsArr addObject:aniView];
[self.tabBarButtons addObject:button];
//2、设置数据
button.item=item;
//3、监听按钮点击
[button addTarget:self action:@selector(buttonClick:) forControlEvents:UIControlEventTouchDown];
//4、默认选中第零个
if(self.tabBarButtons.count==1){[_selectedview play];[self buttonClick:button];}
}
由于篇幅,想了解的更多,直接github下载,demo比较简单,逻辑也是比较清晰的。
https://github.com/jianyu7819/YCLottieTabBar欢迎大家!!
个人工作学习积累,分享~~