iOS实现知乎和途家导航栏渐变的文字动画效果

效果图如下

分析如下：

     1.导航栏一开始是隐藏的,随着scrollView滚动而渐变

     2.导航栏左右两边的navigationItem是一直显示的

     3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片

     4.下拉放大图片效果

     5.title文字动画效果

通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点

分布拆解实现以上效果

一.下拉放大header图片

- (void)viewDidLoad {
 [super viewDidLoad];
 [self.view addSubview:self.scaleImageView];

 // 设置展示图片的约束
 [_scaleImageView mas_makeConstraints:^(MASConstraintMaker *make) {
  make.top.mas_equalTo(0);
  make.left.equalTo(self.view.mas_left);
  make.right.equalTo(self.view.mas_right);
  make.height.mas_equalTo(kHeardH);
 }];
}

// tableView懒加载
-(UITableView *)tableView{
 if(_tableView == nil){
  _tableView = [[UITableView alloc]initWithFrame:self.view.bounds style:UITableViewStylePlain];
  _tableView.contentInset = UIEdgeInsetsMake(kHeardH-35, 0, 0, 0);
  _tableView.delegate = self;
  _tableView.dataSource = self;
  _tableView.separatorStyle = UITableViewCellSeparatorStyleNone;
 }
 return _tableView;
}

// 图片的懒加载
- (UIImageView *)scaleImageView
{
 if (!_scaleImageView) {
  _scaleImageView = [[UIImageView alloc] init];
  _scaleImageView.contentMode = UIViewContentModeScaleAspectFill;
  _scaleImageView.clipsToBounds = YES;
  _scaleImageView.image = [UIImage imageNamed:@"666"];

 }
 return _scaleImageView;
}

// 导航栏高度
#define kNavBarH 64.0f
// 头部图片的高度
#define kHeardH 260
#pragma mark - UIScrollViewDelegate
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {

 // 计算当前偏移位置
 CGFloat offsetY = scrollView.contentOffset.y;
 CGFloat delta = offsetY - _lastOffsetY;
 DLog(@"delta=%f",delta);
 DLog(@"offsetY=%f",offsetY);
 CGFloat height = kHeardH - delta;
 if (height < kNavBarH) {
  height = kNavBarH;
 }

 [_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(height);
 }];
}

- (void)viewDidLoad {
 [super viewDidLoad];

 // 直接添加到控制器的View上面,注意添加顺序,在添加导航栏之后,否则会被遮盖住
 [self configNavigationBar];
}

- (void)configNavigationBar{
 //左边返回按钮
 UIButton *backBtn = [[UIButton alloc]init];
 backBtn.frame = CGRectMake(0, 20, 44, 44);
 [backBtn setImage:[UIImage imageNamed:@"special_back"] forState:UIControlStateNormal];
 [backBtn addTarget:self action:@selector(back) forControlEvents:UIControlEventTouchUpInside];

 //右边分享按钮
 UIButton *shartBtn = [[UIButton alloc]init];
 shartBtn.frame = CGRectMake(SCREENWIDTH-44, 20, 44, 44);
 [shartBtn setImage:[UIImage imageNamed:@"special_share"] forState:UIControlStateNormal];
 [shartBtn addTarget:self action:@selector(shareBtnClick) forControlEvents:UIControlEventTouchUpInside];
 [self.view addSubview:backBtn];
 [self.view addSubview:shartBtn];
}
// 返回
-(void)back{
 [self.navigationController popViewControllerAnimated:YES];
}								 
 1/3    1 2 3 下一页 尾页