NavigationBar上拉渐变, 下拉图片放大效果

首先, 简述一下我想实现的效果, 整个页面是以一个tableView为主的简单浏览页, tableView.headView上有一张图片.
效果1: 当下拉页面时, 图片放大, 当松开手指时, 图片恢复到原来大小
效果2: 当上拉页面, 从视图逐渐消失时, NavigationBar出现并伴随渐变效果

NavgationBar动画.gif

废话不多说, 先上代码（我将按照我自己的思路逐步讲解）:

将屏幕宽度和屏幕高度设为宏，签协议，并根据需求设置属性

#define kScreenWith [UIScreen mainScreen].bounds.size.width
#define kScreenHeight [UIScreen mainScreen].bounds.size.height
@interface ViewController ()
<
    UITableViewDataSource,
    UITableViewDelegate,
    UIScrollViewDelegate
>
@property (nonatomic, strong) UITableView *myTableView;
@property (nonatomic, strong) UIView *backViewForTableHeaderView;
@property (nonatomic, strong) UIImageView *backImageViewForTableHeaderView;
@property (nonatomic, strong) UIImageView *barImageView;
@property (nonatomic, strong) UILabel *nameLabel;
@end

- (void)viewDidLoad {
   [super viewDidLoad];
   // 创建tableView
   [self createTableView];   
   // 处理navigationBar
   [self handleNavigationBar];
}

创建一个tableView(这一步就不用我多说了吧), 这里创建tableView时, 要将y坐标设为-64, 让tableView显示在NavgationBar的下方, 同时tableView的高度要+64, 以保证占据整个屏幕

- (void)createTableView {
   self.myTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, -64, kScreenWidth,kScreenHeight + 64)];
   _myTableView.backgroundColor = [UIColor whiteColor];
   _myTableView.delegate = self;
   _myTableView.dataSource = self;
   [_myTableView registerClass:[UITableViewCell class] forCellReuseIdentifier:@"reuse"];
   [self.view addSubview:_myTableView];
   _myTableView.tableHeaderView = [self createTableHeaderView];
}

创建tableView头视图, 头视图上放置一个imageView和一个label.

 - (UIView *)createTableHeaderView {
    self.backViewForTableHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, kScreenWidth, 200)];
    self.backImageViewForTableHeaderView = [[UIImageView alloc] initWithFrame:self.backViewForTableHeaderView.bounds];
    _backImageViewForTableHeaderView.image = [UIImage imageNamed:@"1.jpg"];
    [self.backViewForTableHeaderView addSubview:_backImageViewForTableHeaderView];
    self.nameLabel = [[UILabel alloc] initWithFrame:CGRectMake(10, 150, 200, 40)];
    _nameLabel.text = @"这游戏真难";
    [self.backViewForTableHeaderView addSubview:_nameLabel];
    return _backViewForTableHeaderView;
}

 - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section {
    return 50;
}
 - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath{
    UITableViewCell *cell = [tableView dequeueReusableCellWithIdentifier:@"reuse"];
    cell.textLabel.text = [NSString stringWithFormat:@"cell- %ld", indexPath.row];
    return cell;
}

在navigationBar上创建一个imageView用来显示背景图片,

 - (void)handleNavigationBar {
    // 去掉背景图片
    [self.navigationController.navigationBar setBackgroundImage:[[UIImage alloc] init] forBarMetrics:UIBarMetricsDefault];
    // 去掉navigationBar底部线条
    [self.navigationController.navigationBar setShadowImage:[[UIImage alloc] init]];
    // 此处y设置为-20, 否则状态栏不能被覆盖
    self.barImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -20, kScreenWidth, 64)];
    _barImageView.image = [UIImage imageNamed:@"2.png"];
    [self.navigationController.navigationBar addSubview:_barImageView];
    self.navigationItem.title = @"导航栏";
}

在tableView滑动方法中更改navigationBar上背景图片的透明度, 和tableHeaderView上的imageView的frame, 故要将tableView的偏移量与bar上imageView的透明度关联, 并将tableHeaderView上的frame与偏移量关联, 实现上拉导航栏渐变, 下拉图片放大的效果.

 - (void)scrollViewDidScroll:(UIScrollView *)scrollView {
    CGFloat offset_Y = scrollView.contentOffset.y;
    CGFloat alpha = (offset_Y + 64) / 200.0f;
    self.barImageView.alpha = alpha;
    if (offset_Y < -64) {
        CGFloat add_height = -(offset_Y + 64);
        CGFloat scale = (200 + add_height) / 200.0f;
        self.backImageViewForTableHeaderView.frame = CGRectMake(-(kScreenWidth * scale - kScreenWidth) / 2.0f, -add_height, kScreenWidth * scale, 200 + add_height);
    }
}

NavigationBar上拉渐变, 下拉图片放大效果

推荐阅读更多精彩内容