模仿手机淘宝标题效果 ios

在上个android的效果之后，我感觉，ios一定有类似的，毕竟，navbar这种效果最早在ios上最早有的。然后，，我就找了一下，发现有人已经实现了。运行之后发现略有问题。他的思路和我的思路很很很相似。

盗原作者图

盗图一直，虽然原作者界面上写gif图片已经实现了。最终效果，但是，我运动时候，不知道是版本问题。还是作者没有上传完全部内容，效果并没有达到图片的样式：向上原有作者的githup

如果你不知道，要实现什么，可以看我上一篇的文章：模仿手机淘宝标题效果 android ，思路其实已经在上一篇进行了解释：

我们回忆一下
先隐藏原生的navbar，我们在原生的navbar下面自己实现一个一模一样大小的，当小球图片滑动到我们自定义的navbar上，隐藏掉自定义navbar，显示原生navbar，让动画看起来流畅，而且有有一种小球图片自己滚动到navbar上的一个效果。

必须提出：动画效果的一个核心思想，你看到的不一定是真的。真亦假时假亦真。之前看一个android特效的大牛说的一句话，很有启发。
重点代码分析

1.初始化 tableHeaderView视图

 personalTableV = [[UITableView alloc] initWithFrame:self.view.bounds style:UITableViewStylePlain];
    personalTableV.delegate = self;
    personalTableV.dataSource = self;
    personalTableV.backgroundColor = [UIColor clearColor];
    personalTableV.separatorStyle = UITableViewCellSeparatorStyleNone;
    [self.view addSubview:personalTableV];
    
 

    UIView *barView = [[UIView alloc] initWithFrame:CGRectMake(0, -20, self.view.frame.size.width, 20)];
    barView.backgroundColor = [UIColor whiteColor];
    [self.navigationController.navigationBar addSubview:barView];
    
    personalTableV.tableHeaderView = [self obtainHeaderView];

2.修改状态栏颜色，保持和最终结果统一修改状态栏为白色

    UIView *barView = [[UIView alloc] initWithFrame:CGRectMake(0, -20, self.view.frame.size.width, 20)];
    barView.backgroundColor = [UIColor whiteColor];
    [self.navigationController.navigationBar addSubview:barView];

1.tableview头视图中，添加自定义的navbar并让他的坐标和原生的同一个位置

   CGRect navRect = self.navigationController.navigationBar.bounds;
    navbar = [[UIView alloc] initWithFrame:CGRectMake(0, 0, navRect.size.width, navRect.size.height)];
    [navbar setBackgroundColor:[UIColor whiteColor]];
    [headerView addSubview:navbar];

4.对tableview滑动事件，进行捕捉。重点代码

//偷了个懒 我固定了。小球的固定大小 这样，我们仅仅看他的圆球的上线滚动变化就可以了。大小的缩放估计，对你们都不是问题。
     CGFloat aw = 50;
        avatarView.frame = CGRectMake((screenW-aw)/2.0, 80 , aw, aw);
        avatarView.layer.cornerRadius = aw/2.0;
        
//    }
//这里让我们自定义的navbar在tableviewhear上保持滚动状态下不改变位置。
    navbar.frame =CGRectMake(0, 20+scrollView.contentOffset.y, navbar.frame.size.width, navbar.frame.size.height);

   //定义一个点，让自定义的navbar和原生navbar交换显示。
    CGFloat oldY = 80 ; 
    CGFloat offsetYL = avatarW - 64.0 - 44.0;
    
    if (offsetY > offsetYL + oldY) {

5我们在原生的navbar上提前写好一个最终效果的小圆球，这样动画效果就会是小圆球留在了navbar上了。

 topAvatarView = [[UIImageView alloc] initWithFrame:CGRectMake(0,0, 50,50)];
    topAvatarView.image = img;
    topAvatarView.layer.cornerRadius = 25;
    

    topAvatarView.contentMode = UIViewContentModeScaleAspectFill;
    topAvatarView.layer.masksToBounds = YES;
    topAvatarView.layer.borderWidth = 2.0;
    topAvatarView.layer.borderColor = [RGBCOLOR(45, 41, 40) CGColor];

其实代码很简单，整体思路是就是这样，有源码估计，，更有真相。
分享我修改后的源码。
我修改后的源码

模仿手机淘宝 标题效果 ios

推荐阅读更多精彩内容

模仿手机淘宝标题效果 ios