正常做这种导航栏隐藏一般都是整体改变透明度实现的,觉得太low了,所以就想能不能做的高大上一点,直接飞过去,于是乎就有了这个动画,下面放上代码,下载链接放在文末:
//核心的东西都在scrollView的代理方法里 #import "ViewController.h" #import "NavAnimaitinCell.h" #import "UIColor+Hex.h" #define ks_width [UIScreen mainScreen].bounds.size.width #define ks_height [UIScreen mainScreen].bounds.size.height #define knavbar_height (kstatusBarHeight + 44) #define kstatusBarHeight [UIApplication sharedApplication].statusBarFrame.size.height #define bottom_distance 60 #define img_height 281 / (450 / ks_width) @interface ViewController ()<UITableViewDelegate, UITableViewDataSource, UIScrollViewDelegate> { UITableView *headerAniTableView; UIImageView *headerBgImageView; UIView *whiteBaseView; UIView *hdHeaderView; UIView *navigationView; UILabel *hotTitle; CGSize titlesize; } @end @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; // Do any additional setup after loading the view, typically from a nib. self.view.backgroundColor = [UIColor whiteColor]; headerAniTableView = [[UITableView alloc] initWithFrame:CGRectMake(0, 0, ks_width, ks_height) style:UITableViewStylePlain]; headerAniTableView.delegate = self; headerAniTableView.dataSource = self; [self.view addSubview:headerAniTableView]; headerAniTableView.tableHeaderView = [self createNavHeaderView]; [self creatNavigationView]; } #pragma mark - creatNavigationView - (void)creatNavigationView { navigationView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ks_width, knavbar_height)]; navigationView.backgroundColor = [UIColor whiteColor]; navigationView.alpha = 0; [self.view addSubview:navigationView]; UIView *lineView = [[UIView alloc] initWithFrame:CGRectMake(0, knavbar_height - 0.5, ks_width, 0.5)]; lineView.backgroundColor = [UIColor colorWithHex:@"#999999"]; [navigationView addSubview:lineView]; } - (UIView *)createNavHeaderView { hdHeaderView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ks_width, img_height)]; hdHeaderView.clipsToBounds = YES; headerBgImageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, ks_width, img_height)]; headerBgImageView.userInteractionEnabled = YES; headerBgImageView.image = [UIImage imageNamed:@"top_header.jpg"]; [hdHeaderView addSubview:headerBgImageView]; whiteBaseView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, ks_width, img_height)]; whiteBaseView.userInteractionEnabled = NO; whiteBaseView.backgroundColor = [UIColor whiteColor]; whiteBaseView.alpha = 0; [hdHeaderView addSubview:whiteBaseView]; titlesize = [@"落红不是无情物" boundingRectWithSize:CGSizeZero options:NSStringDrawingUsesLineFragmentOrigin attributes:@{NSFontAttributeName:[UIFont systemFontOfSize:18]} context:nil].size; hotTitle = [[UILabel alloc] initWithFrame:CGRectMake(20, img_height - bottom_distance, titlesize.width, 44)]; hotTitle.font = [UIFont boldSystemFontOfSize:18]; hotTitle.textColor = [UIColor whiteColor]; hotTitle.text = @"落红不是无情物"; [self.view addSubview:hotTitle]; return hdHeaderView; } #pragma mark - UITableViewDelegate - (NSInteger)tableView:(UITableView *)tableView numberOfRowsInSection:(NSInteger)section { return 15; } - (CGFloat)tableView:(UITableView *)tableView heightForRowAtIndexPath:(NSIndexPath *)indexPath { return 200; } - (UITableViewCell *)tableView:(UITableView *)tableView cellForRowAtIndexPath:(NSIndexPath *)indexPath { NavAnimaitinCell *cell = [tableView dequeueReusableCellWithIdentifier:@"cell"]; if (!cell) { cell = [[NavAnimaitinCell alloc] initWithStyle:UITableViewCellStyleDefault reuseIdentifier:@"cell"]; } cell.selectionStyle = UITableViewCellSelectionStyleNone; return cell; } #pragma UIScrollViewDelegate - (void)scrollViewDidScroll:(UIScrollView *)scrollView { float luochaY = img_height - knavbar_height; //做了一个颜色的渐变,主要是白和黑的相互转化 NSArray *colorArray = @[@"#000000", @"#111111", @"#222222", @"#333333", @"#444444", @"#555555", @"#666666", @"#777777", @"#888888", @"#999999", @"#aaaaaa", @"#bbbbbb", @"#cccccc", @"#dddddd", @"#eeeeee", @"#ffffff"]; CGFloat offSetY = scrollView.contentOffset.y; if (offSetY<=0) { //下拉的时候的效果,这里不能够下拉,所以这里写不写问题不大,如果想要仔加一个下拉放大的效果,就可以卸载这里,保险起见,博主这里做了保留原设置的处理 scrollView.contentOffset = CGPointMake(0, 0); navigationView.alpha = 0; hotTitle.frame = CGRectMake(20, img_height - 60, titlesize.width, 44); hotTitle.textColor = [UIColor whiteColor]; headerBgImageView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1, 1); whiteBaseView.alpha = 0; } else if (offSetY > luochaY) { //飞过去之后就不再做改变了 offSetY = luochaY; navigationView.alpha = 1; whiteBaseView.alpha = 1; hotTitle.frame = CGRectMake(20 + offSetY / luochaY * ((ks_width - 40 - titlesize.width) / 2), kstatusBarHeight, titlesize.width, 44); hotTitle.textColor = [UIColor blackColor]; }else{ //让覆盖的蒙版慢慢变成nav的颜色,此处为白色,标题根据最终位置的差值按照移动的比例一步步变化,造成一种飞过去的感觉 NSLog(@"%f", offSetY); navigationView.alpha = 0; hotTitle.frame = CGRectMake(20 + offSetY / luochaY * ((ks_width - 40 - titlesize.width) / 2),img_height - bottom_distance - (img_height - bottom_distance - kstatusBarHeight) * (offSetY / luochaY), titlesize.width, 44); int colorIndex = colorArray.count - offSetY / (luochaY / colorArray.count); hotTitle.textColor = [UIColor colorWithHex:colorArray[colorIndex]]; headerBgImageView.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1 + 0.4 * (offSetY / luochaY), 1 + 0.2* (offSetY / luochaY)); whiteBaseView.alpha = offSetY / luochaY; } [self.view bringSubviewToFront:hotTitle]; } //防止scrollview停在渐变的过程中,如果停了,根据偏移量回归原位或者直接过渡 - (void)scrollViewDidEndDragging:(UIScrollView *)scrollView willDecelerate:(BOOL)decelerate{ CGFloat offSetY = scrollView.contentOffset.y; if (offSetY > 60 && offSetY <= 112) { [scrollView setContentOffset:CGPointMake(0, img_height - knavbar_height) animated:YES]; } if (offSetY > 0 && offSetY <= 60) { [scrollView setContentOffset:CGPointMake(0, 0) animated:YES]; } }
另外,大家也看到了,这是针对一开始没有导航栏,头部是大图的情况的。
下面是下家最期待的Demo下载地址:点击前往下载