一.前言
今天我们就来实现简书的导航栏图片随着UIScrollView的滚动来改变的效果，简书的效果图如下：
简书效果图
二.思路
下面我就说一下我的实现思路，其实思路很简单，主要就是2步：
- 在UINavigationBar上添加图片
- 实现UIScrollView的代理方法
- (void)scrollViewDidScroll:(UIScrollView *)scrollView
下面就具体说一下这2步是如何实现的。
1.在UINavigationBar上添加图片
这一步其实很简单，但是我在做的时候也踩了一个坑，最开始我是将UIImageView赋值给navigationBar的titleView，让UIImageView替代titleView，结果整个UIImageView被拉的很长，就像下面一样：
UIImageView替代titleView
所以不能这样做，要将UIImageView添加到UINavigationBar上，即：
[self.navigationController.navigationBar addSubview:self.imageView];
NOTE：
因为navigationBar是所有的ViewController共享的，这样做就会有一个问题，那就是当你push或pop到其他页面时，这个图片仍然在navigationBar上，这不是我们所希望的，所以我们要啦解决这个问题。
解决这个问题其实很简单，就是隐藏系统的navigationBar，然后自定义一个navigationBar即可。
- 将系统导航栏隐藏，这个在storyboard或是代码里都可以隐藏；
- 将
[self.navigationController.navigationBar addSubview:self.imageView];改成[self.navigationBar addSubview:self.imageView];，此处的navigationBar是我们自定义的，通过IBOutLet拖出来的； - 在viewWillAppear里面隐藏系统的navigationBar，在viewWillDisappear里面显示系统的navigationBar。
- (void)viewWillAppear:(BOOL)animated {
[super viewWillAppear:animated];
[self.navigationController setNavigationBarHidden:YES animated:animated];
}
- (void)viewWillDisappear:(BOOL)animated {
[super viewWillDisappear:animated];
[self.navigationController setNavigationBarHidden:NO animated:animated];
}
2.实现UIScrollView的代理方法- (void)scrollViewDidScroll:(UIScrollView *)scrollView
这一步是关键，要根据UIScrollView滚动的Y值进行计算，具体代码如下：
- (void)scrollViewDidScroll:(UIScrollView *)scrollView {
CGFloat contentOffsetY = scrollView.contentOffset.y;
CGFloat scale = 1 - contentOffsetY / 300.0;
if (scale < 0.5) {
scale = 0.5;
} else if (scale > 1.0) {
scale = 1.0;
}
self.imageView.transform = CGAffineTransformMakeScale(scale, scale);
}
ok，搞定了！🙃🙃🙃。
效果如下图：
最终效果图
最后上一个Demo
