首页 > 代码库 > 仿知乎/途家导航栏渐变文字动画效果-b

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


技术分享

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可供下载,抱歉,如果有更好的方法实现,希望不吝赐教,共勉!!!

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