iOS开发导航栏标题动画

释放双眼,带上耳机,听听看~!


正常做这种导航栏隐藏一般都是整体改变透明度实现的,觉得太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下载地址:点击前往下载

人已赞赏
iOS文章

iOS开发聊天气泡的绘制和聊天消息列表

2021-2-2 5:15:25

iOS文章

ld: symbol(s) not found for architecture x86_64 clang: error: linker command failed with exit code 1

2021-2-2 6:09:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索