後果圖以下

剖析以下：

     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);
 }];
}

二.導航欄閣下雙方的navigationItem是一向顯示的

- (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];
}

三.自界說導航欄及毛玻璃後果及title文字動畫後果

// 隱蔽體系導航欄
- (void)viewWillAppear:(BOOL)animated{
 [super viewWillAppear:animated];
 self.navigationController.navigationBar.hidden = YES;
}

- (void)viewDidLoad {
 [super viewDidLoad];

 self.navigationController.navigationBar.hidden = YES;
 self.lastOffsetY = - kHeardH+35;
 [self.view addSubview:self.tableView];
 self.tableView.backgroundColor = [UIColor clearColor];
 [self.view addSubview:self.navigationView];
 self.navigationController.navigationBar.barStyle = UIBarStyleBlack;
}


// 自界說導航欄
-(UIView *)navigationView{

 if(_navigationView == nil){
  _navigationView = [[UIView alloc]init];
  _navigationView.frame = CGRectMake(0, 0, SCREENWIDTH, kNavBarH);
  _navigationView.backgroundColor = [UIColor clearColor];
  _navigationView.alpha = 0.0;

  //添加子控件
  [self setNavigationSubView];
 }
 return _navigationView;
}

// 留意:毛玻璃後果API是IOS8的,適配IOS8以下的請用其他辦法
-(void)setNavigationSubView{

 // 毛玻璃配景
 UIImageView *bgImgView = [[UIImageView alloc] initWithFrame:_navigationView.bounds];
 bgImgView.image = [UIImage imageNamed:@"666"];
 [_navigationView addSubview:bgImgView];

 /** 毛玻璃殊效類型
  * UIBlurEffectStyleExtraLight,
  * UIBlurEffectStyleLight,
  * UIBlurEffectStyleDark
  */
 UIBlurEffect * blurEffect = [UIBlurEffect effectWithStyle:UIBlurEffectStyleDark];
 // 毛玻璃視圖
 UIVisualEffectView * effectView = [[UIVisualEffectView alloc] initWithEffect:blurEffect];
 //添加到要有毛玻璃殊效的控件中
 effectView.frame = bgImgView.bounds;
 [bgImgView addSubview:effectView];
 //設置隱約通明度
 effectView.alpha = 0.9f;

 //中央文本框
 UIView *centerTextView = [[UIView alloc]init];
 self.centerTextView = centerTextView;
 CGFloat centerTextViewX = 0;
 CGFloat centerTextViewY = 64;
 CGFloat centerTextViewW = 0;
 CGFloat centerTextViewH = 0;

 //文字年夜小
 NSString *title = @"Pg.lostk開啟後搖滾的新圖景";
 NSString *desc = @"搖滾清心坊8套";
 CGSize titleSize = [title sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:12]}];
 CGSize descSize = [desc sizeWithAttributes:@{NSFontAttributeName:[UIFont systemFontOfSize:11]}];
 centerTextViewW = titleSize.width > descSize.width ? titleSize.width : descSize.width;
 centerTextViewH = titleSize.height + descSize.height +10;
 centerTextViewX = (SCREENWIDTH - centerTextViewW) / 2;
 centerTextView.frame = CGRectMake(centerTextViewX, centerTextViewY, centerTextViewW, centerTextViewH);

 //文字label
 UILabel *titleLabel = [[UILabel alloc]init];
 titleLabel.text = title;
 titleLabel.font = [UIFont systemFontOfSize:12];
 titleLabel.textColor = [UIColor whiteColor];
 titleLabel.frame = CGRectMake(0,5, centerTextViewW, titleSize.height);

 UILabel *descLabel = [[UILabel alloc]init];
 descLabel.textAlignment = NSTextAlignmentCenter;
 descLabel.text = desc;
 descLabel.font = [UIFont systemFontOfSize:11];
 descLabel.textColor = [UIColor whiteColor];
 descLabel.frame = CGRectMake(0, titleSize.height + 5, centerTextViewW, descSize.height);

 [centerTextView addSubview:titleLabel];
 [centerTextView addSubview:descLabel];
 [_navigationView addSubview:centerTextView];
}
聲明控件

@property(nonatomic,strong) UIView *navigationView;  // 導航欄
@property(nonatomic,strong) UIView *centerTextView;  // title文字
@property (assign, nonatomic) CGFloat lastOffsetY;  // 記載上一次地位
@property (nonatomic,strong) UIImageView *scaleImageView; // 頂部圖片
焦點代碼

#pragma mark - ScrollViewDelegate
- (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;
 }
 CGFloat margin = 205;
 if (delta>margin && delta<margin+39) {
  self.centerTextView.y = 64 - (delta-margin);
  self.centerTextView.alpha = 1.0;
 }

 if (delta>margin+39) {
  self.centerTextView.y = 25;
  self.centerTextView.alpha = 1.0;
 }
 if (delta<=margin) {
  self.centerTextView.alpha = 0;
 }
 if (delta<= 0) {
  self.centerTextView.y =64;
  self.centerTextView.alpha = 0.0;
 }
 [_scaleImageView mas_updateConstraints:^(MASConstraintMaker *make) {
  make.height.mas_equalTo(height);
 }];

 CGFloat alpha = delta / (kHeardH - kNavBarH);
 if (alpha >= 1.0) {
  alpha = 1.0;
 }
 self.navigationView.alpha = alpha;
}

總結

以上就是這篇文章的全體內容，願望對年夜家的進修或許任務帶來必定的贊助，假如有疑問年夜家可以留言交換。

【iOS完成知乎和途家導航欄突變的文字動畫後果】的相關資料介紹到這裡，希望對您有所幫助！ 提示：不會對讀者因本文所帶來的任何損失負責。如果您支持就請把本站添加至收藏夾哦！