集成lottie动画自定义tabBar
在当今一个APP想要脱颖而出必须在用户体验上足够出色，而APP用户界面动画就能极大地提升用户体验流畅感和交互感，Airbnb开源的Lottie，可以让开发者免去写一行一行的代码而非常容易地渲染动画。你可以直接把 Adobe After Effects的动画用在你的Xcode 项目中。并且Android、macOS、React Native都可使用。
- 开发成本低。设计师导出 json 文件后，扔给开发即可，跨平台。
- iOS、安卓平台可以使用一套文件
- 可以替代原来需要使用帧图完成的动画
预览
Lottie.png
NSArray *nameArray = @[@"huiyuan",@"fangzi",@"dingdan",@"wode"];
LOTAnimationView *LOTView = [LOTAnimationView animationNamed:nameArray[I]];
LOTView.contentMode = UIViewContentModeScaleAspectFill;
if (LOTView.animationProgress == 0 ) {
[LOTView playToProgress:0.5 withCompletion:^(BOOL animationFinished) {
NSLog(@"pressButtonAction isSelected animation");
}];
}
LOTAnimationView *LOTView = [self viewWithTag:(sender.tag + 100)];
for (LOTAnimationView *view in self.subviews) {
if ([view isKindOfClass:[LOTAnimationView class]]) {
[view stop];
}
}
自定义tabBar
tabbar上加动画，就需要取自定义新的tabbar去承载动画，关键代码
- (void)layoutSubviews {
[super layoutSubviews];
// 移除系统的tabBarItem
Class class = NSClassFromString(@"UITabBarButton");
for (UIView *item in self.subviews) {
if ([item isKindOfClass:class]) {
[item removeFromSuperview];
}
}
// 设置自定义的tabBarItem
[self setupItems];
}
/// 设置自定义的tabbarItem
- (void)setupItems {
CGFloat width = self.frame.size.width/self.LMItems.count;
CGFloat height = self.frame.size.height;
for (int i = 0; i < self.LMItems.count; i++) {
LMTabBarItem *item = [self.LMItems objectAtIndex:i];
item.frame = CGRectMake(i*width, 0, width, height);
[self addSubview:item];
item.delegate = self;
}
}
/// 设置自定义的tabBar
- (void)setupCustomTabBarItems {
self.tabBar.hidden = YES;
//创建items数组
NSArray *animationJsonNameArray = @[@"fangzi",@"huiyuan",@"dingdan",@"wode"];
NSMutableArray *items = [NSMutableArray array];
for (int i = 0; i < self.lmViewControllers.count; i++) {
LMTabBarItem *item = [[LMTabBarItem alloc]init];
item.animationJsonName = animationJsonNameArray[I];
[items addObject:item];
item.tag = I;
}
[self setBeginItemAnimation:items[0] item:0];
self.customTabBar.LMItems = [items copy];
[self.view addSubview:self.customTabBar];
self.customTabBar.frame = CGRectMake(0, CGRectGetHeight(self.view.frame) - LMTabBarHeight, CGRectGetWidth(self.view.frame), LMTabBarHeight);
}
// item点击手势，响应点击事件
- (void)tapItem:(UITapGestureRecognizer *)tap {
if (self.delegate && [self.delegate respondsToSelector:@selector(tabBarItem:didSelectIndex:)]) {
[self.delegate tabBarItem:self didSelectIndex:self.tag - defaultTag];
}
}
// 修改布局
- (void)layoutSubviews {
[super layoutSubviews];
CGRect rect = self.frame;
rect.origin.x = 0;
rect.origin.y = -35;
rect.size.height += 20;
self.animationView.frame = rect;
}
KVO自定义tabBar
- (void)itemButton:(NSInteger)itemNumber itemBlock:(nonnull itemButtonBlock)itemBlock{
CGFloat itemW = [UIScreen mainScreen].bounds.size.width / itemNumber;
CGFloat w = itemW / 2.0 - itemW / 2.0;
NSArray *nameArray = @[@"huiyuan",@"fangzi",@"dingdan",@"wode"];
for (int i = 0; i < itemNumber; i ++) {
TTItemButton *item = [[TTItemButton alloc]initWithFrame:CGRectMake(w +itemW *i, 0, itemW, 66) ];
item.tag = 100 + I;
LOTAnimationView *LOTView = [LOTAnimationView animationNamed:nameArray[I]];
LOTView.tag = item.tag + 100;
LOTView.contentMode = UIViewContentModeScaleAspectFill;
CGRect LOTViewFrame = item.frame;
LOTViewFrame.origin.y = -16;
[LOTView setFrame:LOTViewFrame];
[self addSubview:LOTView];
[item addTarget:self action:@selector(selectedButtonItem:) forControlEvents:UIControlEventTouchUpInside];
[self addSubview:item];
}
[self setBeginAnimationLOTView];
self.block = itemBlock;
}
- (void)setBeginAnimationLOTView{
LOTAnimationView *LOTView = [self viewWithTag:200];
if (LOTView.animationProgress == 0 ) {
[LOTView playToProgress:0.5 withCompletion:^(BOOL animationFinished) {
NSLog(@"pressButtonAction isSelected animation");
}];
}
}
- (void)selectedButtonItem:(UIButton *)sender{
if (self.currentItem != sender.tag) {
self.currentItem = sender.tag;
LOTAnimationView *LOTView = [self viewWithTag:(sender.tag + 100)];
for (LOTAnimationView *view in self.subviews) {
if ([view isKindOfClass:[LOTAnimationView class]]) {
[view stop];
}
}
if (LOTView.animationProgress == 0 ) {
[LOTView playToProgress:0.5 withCompletion:^(BOOL animationFinished) {
NSLog(@"pressButtonAction isSelected animation");
}];
}
self.block(sender.tag);
}
}
- (TTTabbarView *)tttabbarView{
if (!_tttabbarView) {
_tttabbarView = [[TTTabbarView alloc]initWithFrame:self.bounds];
[_tttabbarView itemButton:4 itemBlock:^(NSInteger item) {
if (self->_barDelegate && [self->_barDelegate respondsToSelector:@selector(selectedItemButton:)]) {
[self->_barDelegate selectedItemButton:item];
}
}];
}
return _tttabbarView;
}
- (void)layoutSubviews
{
[super layoutSubviews];
// 设置tabBarView的frame
self.tttabbarView.frame = self.bounds;
// 把tabBarView带到最前面，覆盖tabBar的内容
[self bringSubviewToFront:self.tttabbarView];
}
TTCustomTabbar *customBar = [[TTCustomTabbar alloc]init];
customBar.barDelegate = self;
[self setValue:customBar forKey:@"tabBar"];
注意⚠️
在自定义TabBar时，可能会出现NavigationBar设置不生效的情况，
在TabBarViewController里去设置NavigationBar,这样也会导致二级跳转的时候TabBar不消失，需要在一级界面设置二级界面hidesBottomBarWhenPushed = YES
- (void)addAllChildViewController {
GoTabbarChildMessageViewController *homeVC = [[GoTabbarChildMessageViewController alloc] init];
homeVC.view.backgroundColor = [UIColor redColor];
[self addChildViewController:homeVC title:@"首页" imageNamed:@"tabBar_home"];
GoTabbarChildSetViewController *activityVC = [[GoTabbarChildSetViewController alloc] init];
activityVC.view.backgroundColor = [UIColor yellowColor];
[self addChildViewController:activityVC title:@"活动" imageNamed:@"tabBar_activity"];
UIViewController *findVC = [[UIViewController alloc] init];
findVC.view.backgroundColor = [UIColor blueColor];
[self addChildViewController:findVC title:@"发现" imageNamed:@"tabBar_find"];
UIViewController *mineVC = [[UIViewController alloc] init];
mineVC.view.backgroundColor = [UIColor greenColor];
[self addChildViewController:mineVC title:@"我的" imageNamed:@"tabBar_mine"];
}
// 添加某个 childViewController
- (void)addChildViewController:(UIViewController *)vc title:(NSString *)title imageNamed:(NSString *)imageNamed {
UINavigationController *nav = [[UINavigationController alloc] initWithRootViewController:vc];
[self addChildViewController:nav];
}
完整代码：https://github.com/princeSmall/Lottie-TabBar