仿知乎/途家导航栏渐变文字动画效果-b

Posted 2020-08-09 qigemingnan

demo.gif

效果图如上,简单分析下

• 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; 
}

 

由于是直接写项目中,没有demo可供下载,抱歉,如果有更好的方法实现,希望不吝赐教,共勉!!!