iOS开发-导航栏标题动画

简介: iOS开发-导航栏标题动画

1.png

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

目录
相关文章
|
6天前
|
安全 数据处理 Swift
深入探索iOS开发中的Swift语言特性
本文旨在为开发者提供对Swift语言在iOS平台开发的深度理解,涵盖从基础语法到高级特性的全面分析。通过具体案例和代码示例,揭示Swift如何简化编程过程、提高代码效率,并促进iOS应用的创新。文章不仅适合初学者作为入门指南,也适合有经验的开发者深化对Swift语言的认识。
23 9
|
5天前
|
Android开发 Swift iOS开发
探索安卓与iOS开发的差异和挑战
【10月更文挑战第37天】在移动应用开发的广阔舞台上,安卓和iOS这两大操作系统扮演着主角。它们各自拥有独特的特性、优势以及面临的开发挑战。本文将深入探讨这两个平台在开发过程中的主要差异,从编程语言到用户界面设计,再到市场分布的不同影响,旨在为开发者提供一个全面的视角,帮助他们更好地理解并应对在不同平台上进行应用开发时可能遇到的难题和机遇。
|
3天前
|
iOS开发 开发者
探索iOS开发中的SwiftUI框架
【10月更文挑战第39天】在苹果的生态系统中,SwiftUI框架以其声明式语法和易用性成为开发者的新宠。本文将深入SwiftUI的核心概念,通过实际案例展示如何利用这一框架快速构建用户界面,并探讨其对iOS应用开发流程的影响。
|
6天前
|
JSON 前端开发 API
探索iOS开发之旅:打造你的第一个天气应用
【10月更文挑战第36天】在这篇文章中,我们将踏上一段激动人心的旅程,一起构建属于我们自己的iOS天气应用。通过这个实战项目,你将学习到如何从零开始搭建一个iOS应用,掌握基本的用户界面设计、网络请求处理以及数据解析等核心技能。无论你是编程新手还是希望扩展你的iOS开发技能,这个项目都将为你提供宝贵的实践经验。准备好了吗?让我们开始吧!
|
11天前
|
设计模式 前端开发 Swift
探索iOS开发:从初级到高级的旅程
【10月更文挑战第31天】在这篇文章中,我们将一起踏上iOS开发的旅程。无论你是初学者还是有经验的开发者,这篇文章都将为你提供有价值的信息和技巧。我们将从基础开始,逐步深入到更高级的技术和概念。让我们一起探索iOS开发的世界吧!
|
9天前
|
存储 数据可视化 Swift
探索iOS开发之旅:从新手到专家
【10月更文挑战第33天】在这篇文章中,我们将一起踏上一场激动人心的iOS开发之旅。无论你是刚刚入门的新手,还是已经有一定经验的开发者,这篇文章都将为你提供宝贵的知识和技能。我们将从基础的iOS开发概念开始,逐步深入到更复杂的主题,如用户界面设计、数据存储和网络编程等。通过阅读这篇文章,你将获得成为一名优秀iOS开发者所需的全面技能和知识。让我们一起开始吧!
|
10天前
|
移动开发 Java Android开发
探索Android与iOS开发的差异性与互联性
【10月更文挑战第32天】在移动开发的大潮中,Android和iOS两大平台各领风骚。本文将深入浅出地探讨这两个平台的开发差异,并通过实际代码示例,展示如何在各自平台上实现相似的功能。我们将从开发环境、编程语言、用户界面设计、性能优化等多个角度进行对比分析,旨在为开发者提供跨平台开发的实用指南。
32 0
|
物联网 Android开发 iOS开发
iOS开发 - 蓝牙学习的总结
iOS开发 - 蓝牙学习的总结
184 0
|
iOS开发
IOS开发---菜鸟学习之路--(九)-利用PullingRefreshTableView实现下拉刷新
本章主要讲解如何利用PullingRefreshTableView实现下拉(上拉)刷新的操作  PullingRefreshTableView 实现上下拉刷新的例子百度有很多,大家可以自己搜索下,先看下那些例子(一般搜索过来的都是一样的大家反正先把那部分内容先了解一下,然后再看本文档比较好。
883 0
|
iOS开发 Android开发 存储
IOS开发---菜鸟学习之路--(十)-实现新闻详细信息浏览页面
前面已经将了上下拉刷新 实现了上下拉刷新后我们的第一级界面就做好,接下来我们就需要实现 新闻详细信息浏览了 我个人认为一般实现新闻详细页面的方法有两种(主要是数据源的不同导致了方法的不同) 第一种是本身新闻就是一个链接地址,同时是已经处理好的适应手机浏览的网页 对于这种类型的数据源,我们直接在页面中放一个WebView控件,然后将URL传递过去就好了 另一种则是普通的包含标题、时间、内容、图片等数据结构的新闻内容(我们要实现的也是这种新闻,因为实现了这种之后, 我们就可以实现任何自定义的详细信息的页面了。
883 0