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下载地址:点击前往下载

目录
相关文章
|
9天前
|
安全 Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与用户体验的深度对比
在移动应用开发的广阔天地中,安卓和iOS两大平台各占半壁江山。本文旨在通过数据驱动的分析方法,深入探讨这两大操作系统在开发环境、用户界面设计及市场表现等方面的差异。引用最新的行业报告和科研数据,结合技术专家的观点,本文将提供对开发者和市场分析师均有价值的洞见。
|
2天前
|
前端开发 编译器 iOS开发
探索iOS开发的未来:SwiftUI和Combine的革新之路
随着苹果不断推动其操作系统的进化,iOS开发领域正经历着一场前所未有的变革。本文将深入分析SwiftUI和Combine框架如何重塑iOS应用的开发流程,通过对比传统MVC模式与现代SwiftUI的差异,揭示Combine响应式编程范式在简化异步代码方面的巨大潜力。文章还将探讨这些技术如何影响开发者的生产力、应用的性能以及最终用户的体验。通过案例分析和数据支持,我们将展望iOS开发的新趋势,并讨论如何在不断变化的技术环境中保持竞争力。
|
8天前
|
iOS开发 开发者 UED
探索iOS开发中的SwiftUI框架
【6月更文挑战第28天】在移动应用开发的海洋中,SwiftUI作为iOS平台的新星,以其声明式语法和灵活性,正引领着界面设计的未来。本文将带你深入理解SwiftUI的核心概念、布局能力以及如何通过它提升开发效率,为开发者们提供一份实操指南,解锁SwiftUI的强大潜力。
176 1
|
2天前
|
移动开发 Android开发 iOS开发
探索安卓与iOS开发的差异:平台选择对应用性能的影响
在移动开发的广阔舞台上,安卓与iOS这两大操作系统各据一方,引领着技术潮流与市场需求。本文深入探讨了这两个平台在开发过程中的关键差异,并分析了这些差异如何影响应用的性能和用户体验。通过对比分析,我们将揭示开发者在选择平台时应考虑的技术细节,以及这些选择如何塑造最终产品的命运。文章不仅为开发者提供了实用的指导,也为那些对移动开发感兴趣的读者提供了深刻的洞见。
|
3天前
|
Java Android开发 iOS开发
探索安卓与iOS开发的差异:平台特性与创新潜力
在移动应用开发的广阔天地中,安卓和iOS两大平台各占据一方。本文深入剖析了这两个操作系统的开发环境、工具、语言及市场趋势,旨在为开发者提供一个全面的比较视角。文章将基于最新的行业报告、技术论坛讨论以及专家分析,详细阐述两个平台的技术架构差异、开发成本和用户体验设计的不同点。通过数据支持的论证,揭示安卓与iOS在创新潜力上的独特优势,并探讨它们如何塑造未来的移动应用生态。
5 0
|
5天前
|
API Swift iOS开发
探索iOS开发:SwiftUI框架的革新之旅
【7月更文挑战第2天】在这篇文章中,我们将深入探讨SwiftUI——苹果为简化iOS界面开发而设计的现代框架。不同于传统的摘要概述,我们将通过一个开发者的视角,逐步揭示SwiftUI如何改变iOS应用的构建过程,并分享一些实用的技巧和最佳实践,以助你快速上手这一前沿技术。
|
10天前
|
缓存 C语言 iOS开发
一篇文章讲明白iOS开发系列
一篇文章讲明白iOS开发系列
|
12天前
|
Java 开发工具 Android开发
探索Android与iOS开发的差异:平台选择对项目成功的影响
在移动应用开发的广阔天地中,Android和iOS两大平台各自占据着半壁江山。本文将深入探讨这两个平台在开发过程中的关键差异点,包括编程语言、开发工具、用户界面设计、性能优化以及市场覆盖等方面。通过对这些关键因素的比较分析,旨在为开发者提供一个清晰的指南,帮助他们根据项目需求和目标受众做出明智的平台选择。
|
12天前
|
编解码 Android开发 iOS开发
深入探索Android与iOS开发的差异与挑战
【6月更文挑战第24天】在移动应用开发的广阔舞台上,Android和iOS两大操作系统扮演着主角。它们各自拥有独特的开发环境、工具集、用户基础及市场策略。本文将深度剖析这两个平台的开发差异,并探讨开发者面临的挑战,旨在为即将踏入或已在移动开发领域奋斗的开发者提供一份实用指南。
36 13