iOS開發-導航欄標題動畫
阿新 • • 發佈:2018-11-12
正常做這種導航欄隱藏一般都是整體改變透明度實現的,覺得太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下載地址:點選前往下載