zoukankan      html  css  js  c++  java
  • 仿知乎/途家导航栏渐变文字动画效果-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可供下载,抱歉,如果有更好的方法实现,希望不吝赐教,共勉!!!

  • 相关阅读:
    zbb20181207 springboot @ConfigurationProperties使用
    zbb20181206 logback,lombok 默认日志logback配置解析
    Spring Boot (8) 全局异常处理
    Spring Boot (7) JdbcTemplate访问数据库
    Spring Boot (6) Spring Data JPA
    Spring Boot (4) 静态页面和Thymeleaf模板
    Spring Boot (3) 热部署devtools
    Spring Boot (2) Restful风格接口
    Spring Boot (1) 构建第一个Spring Boot工程
    idea使用maven搭建ssm框架实现登陆商品增删改查
  • 原文地址:https://www.cnblogs.com/isItOk/p/5891113.html
Copyright © 2011-2022 走看看