关于UINavigationBar兼容iPhone X的转场动画

导航栏在实际应用中会有很多，跟随scrollview改变其透明度或偏移的效果。以往是使用hide导航后，再使用自定的方式实现。但仔细观察一些大的APP可以发现，顶部的items或背景都是有转场效果的。所以，一直在考虑如何实现，同时可以兼容iPhone X。

方案

1、跟随滚动时，导航栏偏移，这个可以直接通过改变导航栏frame的方式改变
2、透明度变化，最开始我的方案是通过原生方法，不断根据透明度的值去生成新的图片或背景色来修改，效果是可以实现的。但是在两个controller之前转场时，就会显的非常木
3、最后还是使用了自定义背景view的方案来解决的，经测试在iphoneX上面也是完美的。
创建一个UINavigationBar的category，直接上代码

static char customBackgroundImageViewKey;
/**
使用此方法，通过以下设置原生的背景图及shadow为透明
[xxx setBackgroundImage:[UIImage new] forBarMetrics:UIBarMetricsDefault];
 [xxx setShadowImage:[UIImage new]];
*/
@implementation UINavigationBar (LGXBackground)

- (UIImageView *)customBackgroundImageView
{
    return objc_getAssociatedObject(self, &customBackgroundImageViewKey);
}
- (void)setCustomBackgroundImageView:(UIImageView *)customBackgroundImageView
{
    objc_setAssociatedObject(self, &customBackgroundImageViewKey, customBackgroundImageView, OBJC_ASSOCIATION_RETAIN_NONATOMIC);
}
#pragma mark - 设置项
/// 设置背景色
- (void)lgx_setBackgroundColor:(UIColor *)backgroundColor
{
    [self checkOverlayView];
    [self.customBackgroundImageView setBackgroundColor:backgroundColor];
}
/// 设置背景图
- (void)lgx_setBackgroundImage:(UIImage *)image
{
    [self checkOverlayView];
    [self.customBackgroundImageView setImage:image];
}
/// 设置背景alpha
- (void)lgx_setBackgroundAlpha:(float)alpha
{
    [self checkOverlayView];
    self.customBackgroundImageView.alpha = alpha;
}
/// 设置shadow
- (void)lgx_setShadowImage:(UIImage *)image
{
    
}
- (void)checkOverlayView
{
    if (!self.customBackgroundImageView) {
        UIView *contentView = self.subviews.firstObject;
        CGFloat width = CGRectGetWidth(self.bounds);
        CGFloat height = CGRectGetHeight(self.bounds) + [UIApplication sharedApplication].statusBarFrame.size.height;
        self.customBackgroundImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, contentView.bounds.size.height - height, width, height)];
        self.customBackgroundImageView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleTopMargin;
        [contentView insertSubview:self.customBackgroundImageView atIndex:0];
    }
}
@end

4、至此就可以通过scrollView的变化来修改两个属性变化了，下面我们来说一下转场动画

转场

其实转场有很多种，我觉得这篇文章讲的很好。有兴趣的可以仔细阅读一下。但是我使用了另一个API

UIViewController的 transitionCoordinator属性

这个属性向我们提供一个非常简单的API，但是却可以帮助我们实现一些转场效果，下面贴下代码。

// from controller
- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];
    [self.transitionCoordinator animateAlongsideTransition:^(id<UIViewControllerTransitionCoordinatorContext>  _Nonnull context) {
        // change alpha or frame ...
          } completion:NULL];
}
// 同样在 target controller 中也进行相应的代码，只是改变的效果不同罢了。

是不是很简单。效果非常的完美，在iPhone 10上面，也表现的很棒，看下效果图

QQ20170920-175814.gif QQ20170920-175707.gif