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

移动开发 得得之家
这篇文章给大家分享了利用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);
 }];
}

二.导航栏左右两边的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 性能优化中离屏渲染
本文主要介绍了IOS 性能优化中离屏渲染的资料，提供了几种方法讲解了优化，有需要的小伙伴可以参考下
iOS 检测网络状态的两种方法
一般有Reachability和AFNetworking监测两种方式，都是第三方的框架，下文逐一详细给大家讲解，感兴趣的朋友一起看看吧
IOS 陀螺仪开发(CoreMotion框架)实例详解
这篇文章主要介绍了IOS 陀螺仪开发实例详解的相关资料,介绍了螺旋仪参数意义及CoreMotion框架，需要的朋友可以参考下
IOS 实现摇一摇的操作
这篇文章主要介绍了IOS 实现摇一摇的操作的相关资料,需要的朋友可以参考下
总结iOS实现渐变颜色的三种方法
这篇文章主要给大家总结了iOS实现渐变颜色的三种方法，分别是利用CAGradientLayer实现渐变、Core Graphics相关方法实现渐变以及用CAShapeLayer作为layer的mask属性实现，大家可以根据自己的需要选择使用，下面来一起看看吧。
cmake ios终端下执行提示错误 iOS version not found, tested: [5.0;5.1;6.0;6.1;7.0;8.3]的解决方案
这篇文章主要介绍了cmake ios终端下执行提示错误 iOS version not found, tested: [5.0;5.1;6.0;6.1;7.0;8.3]的解决方案的相关资料,需要的朋友可以参考下
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式