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文字动画效果

1// 隐藏系统导航栏

- (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 && deltamargin+39) {

self.centerTextView.y = 25;

self.centerTextView.alpha = 1.0;

}

if(delta<=margin) {

self.centerTextView.alpha = 0;

}

if(delta= 1.0) {

alpha = 1.0;

}

self.navigationView.alpha = alpha;

}

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

文章转自船长_的

你可能感兴趣的:(iOS 仿知乎/途家导航栏渐变文字动画效果)