iOS_自定义转场TabBar的隐藏动画

发表于
  • 摘要
    实现同iOS 11 App Store Today相似的转场效果.本文尝试解决转场(Transition)过程中TabBar的隐藏(向下滑出屏幕).

tabbar_ani_slow.gif

遇到的问题

项目中使用的是系统自带的Storyboard上的TabBar,TabBar的隐藏使用的是hidesBottomBarWhenPushed方法.实现自定义转场的过程中,TabBar会跟随转场动画向左移出屏幕,但需求是向下滑出屏幕.如果自定义TabBar可能更容易实现,具体效果可以点击App Store上的”今日 App”.

解决的问题

仅在自定义转场中按需隐藏TabBar(push向下滑出屏幕,pop向上划入屏幕),不影响其他使用系统转场的页面.

解决方案
  • 使用方法
    首先确定是否使用的自定义转场,如果定义了自定义转场的类,在要使用的页面实现UINavigationControllerDelegate的代理方法
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    -(id<UIViewControllerAnimatedTransitioning>)navigationController:(UINavigationController *)navigationController
                                     animationControllerForOperation:(UINavigationControllerOperation)operation
                                                  fromViewController:(UIViewController *)fromVC
                                                    toViewController:(UIViewController *)toVC 
    {
        //根据类型返回对应动画
        if (operation == UINavigationControllerOperationPush) {
            return _trans;
        }else {
            return nil;
        }   
    }

在我的工程中,存在着重写的TabBar、UITabBarController、UINavigationController的类分别实现不同的需求,要实现这种新增加的效果,最好的方法应该是使用Category,所以我们定义UITabBar的类别UITabBar+CustomTabbar,实现动画(出处作者称为淡入淡出效果).

UITabBar+CustomTabbar.h
1
2
3
4
5
#import <UIKit/UIKit.h>

@interface UITabBar (HYCustomTabBar)<CAAction>

@end
UITabBar+CustomTabbar.m
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
#import "UITabBar+CustomTabbar.h"
 
@implementation UITabBar (CustomTabbar)
-(id<CAAction>)actionForLayer:(CALayer *)layer forKey:(NSString *)event{
    if ([event isEqualToString:@"position"]) {
        if(layer.position.x<0){
            //show tabbar
            CATransition *pushFromTop = [[CATransition alloc] init];
            pushFromTop.duration = 0.3;
            pushFromTop.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
            pushFromTop.type = kCATransitionPush;
            pushFromTop.subtype = kCATransitionFromTop;
            return pushFromTop;
        }else if (layer.position.x>0&&(layer.position.y>layer.bounds.size.height)&&(layer.position.y<[UIScreen mainScreen].bounds.size.height)){
            //hide tabbar
            CATransition *pushFromBottom = [[CATransition alloc] init];
            pushFromBottom.duration = 0.3;
            pushFromBottom.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn];
            pushFromBottom.type = kCATransitionPush;
            pushFromBottom.subtype = kCATransitionFromBottom;
            return pushFromBottom;
        }
    }
    return (id<CAAction>)[NSNull null];
}
 
-(void)runActionForKey:(NSString *)event object:(id)anObject arguments:(NSDictionary *)dict{
    
}
@end

其中

1
2
layer.position.y>layer.bounds.size.height
layer.position.y<[UIScreen mainScreen].bounds.size.height

是为了去除第一次加载视图的情况。
然后在自己重写的UITabBarController类中添加类别的引用

1
2
3
4
5
6
7
#import "TabVC.h"
#import "UITabBar+CustomTabbar.h"

@interface TabVC ()

@end
  ...