iOS 仿知乎/途家导航栏渐变文字动画效果
All
8年前
<p style="text-align:center"><img src="https://simg.open-open.com/show/c9b41b765423583fd938e7c32174c0dd.gif"></p> <p style="text-align:center">demo.gif</p> <h3><strong>效果图如上,简单分析下</strong></h3> <ul> <li> <p>1.导航栏一开始是隐藏的,随着scrollView滚动而渐变</p> </li> <li> <p>2.导航栏左右两边的navigationItem是一直显示的</p> </li> <li> <p>3.导航栏参考了途家app,使用了毛玻璃效果,背景是一张图片</p> </li> <li> <p>4.下拉放大图片效果</p> </li> <li> <p>5.title文字动画效果</p> </li> </ul> <p>通过简单分析,系统的导航栏实现以上效果有点困难,直接自定义一个假的导航栏更容易点</p> <h3><strong>分布拆解实现以上效果</strong></h3> <p><strong>一.下拉放大header图片</strong></p> <pre> <code class="language-objectivec">- (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); }]; }</code></pre> <p><strong>二.导航栏左右两边的navigationItem是一直显示的</strong></p> <pre> <code class="language-objectivec">- (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]; }</code></pre> <p><strong>三.自定义导航栏及毛玻璃效果及title文字动画效果</strong></p> <pre> <code class="language-objectivec">// 隐藏系统导航栏 - (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]; }</code></pre> <p>声明控件</p> <pre> <code class="language-objectivec">@property(nonatomic,strong) UIView *navigationView; // 导航栏 @property(nonatomic,strong) UIView *centerTextView; // title文字 @property (assign, nonatomic) CGFloat lastOffsetY; // 记录上一次位置 @property (nonatomic,strong) UIImageView *scaleImageView; // 顶部图片</code></pre> <p><strong>核心代码</strong></p> <pre> <code class="language-objectivec">#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; }</code></pre> <p> </p> <p> </p> <p>来自：http://www.jianshu.com/p/ae5e72dbb8dd</p> <p> </p>