视差效果是我们在许多 app 中经常能够看到的一种界面视觉效果。尤其是在滚动列表中应用得尤为广泛。
我们首先来看看最终实现的效果：
整个效果实现的要点总结如下：
- 图片退出速度慢于列表滑动速度
- 图片全程被列表覆盖并且在退出同时淡出
- 列表下拉越界后图片按比例放大
首先我们准备工程，在所需的 ViewController 中分别加入 UITableView 和 UIImageView：
- (void)viewDidLoad {
[super viewDidLoad];
self.automaticallyAdjustsScrollViewInsets = NO;
self.tableView = [[UITableView alloc] initWithFrame:self.view.bounds];
[self.tableView setBackgroundColor:[UIColor colorWithWhite:1 alpha:0]];
[self.tableView setContentInset:UIEdgeInsetsMake(300, 0, 0, 0)];
[self.tableView setDelegate:self];
[self.tableView setDataSource:self];
self.imageView = [[UIImageView alloc] initWithFrame:CGRectMake(0, -150, self.view.bounds.size.width, 300)];
self.imageView.layer.anchorPoint = CGPointMake(0.5f, 0);
[self.view addSubview:self.imageView];
[self.view addSubview:self.tableView];
}
下面我们一一分析，首先automaticallyAdjustsScrollViewInsets是 UIViewController 的一个内建属性，它用来设置是否让内部的 UITableView 在顶部留出一定空间来防止被导航条覆盖，因为我们要手动调节 inset，所以把这个属性就设置为NO。
然后我们用setContentInset为 UITableView 设置内部间距，这里我们假定图片最大高度为300。
下面是对 UIImageView 进行设置，我们设置了它的锚点，这里作用是什么我们后面会讲到。
最后，需要注意的是subView的添加顺序，要先添加图片，再添加列表，因为图片要被盖住。为了避免图片被列表完全盖住，我们要把列表的背景设为透明，然后通过列表中的 cell 来盖住图片。
接下来我们来编写视差效果的核心部分，计算图片位移和缩放：
- (void)makeParallaxEffect {
CGPoint point = [((NSValue *) [self.tableView valueForKey:@"contentOffset"]) CGPointValue];
if (point.y < -300) {
float scaleFactor = fabs(point.y) / 300.f;
self.imageView.transform = CGAffineTransformMakeScale(scaleFactor, scaleFactor);
} else {
self.imageView.transform = CGAffineTransformMakeScale(1, 1);
}
if (point.y <= 0) {
if (point.y >= -300) {
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, (fabs(point.y) - 300) / 2.f);
}
self.imageView.alpha = fabs(point.y / 300.f);
self.navigationController.navigationBar.alpha = 1 - powf(fabs(point.y / 300.f), 3);
} else {
self.imageView.transform = CGAffineTransformTranslate(self.imageView.transform, 0, 0);
self.imageView.alpha = 0;
self.navigationController.navigationBar.alpha = 1;
}
}
这段代码我不全部解释，绝大部分大家应该能够自己看懂。
首先我们要用 valueForKey 得到 Apple 没有对外公开的一个属性叫做contentOffset，它是用来表示列表滑动距离最顶部的距离的，因为我们设置了内补，所以这个值会从-300开始计算。
如果列表下拉越界，那么这个值将会比-300还要小，因此我们可以依次判断列表是否越界，一旦越界，那么这个值得绝对值就会是图片应当拉伸到的高度。因为要等比缩放，所以我们计算缩放因子，然后交给 transform 来缩放图片，而不是直接设置图片的 frame。
这里就要提到之前我们设置的 anchorPoint 了，为什么要设置它呢？因为默认情况下 transform 的中心点在整个 UIView 的中心位置，这样图片缩放的时候就会以图片的中心进行缩放了。为了实现预想的效果，我们就要把anchorPoint设置为图片的中上位置
但是，这样设置之后，图片就会下降150像素，所以我们把 frame 的 y 设置为-150。
至于其他部分，我们还设置了 UINavigationBar 的透明度和图片的透明度。
至此我们就基本实现了视差效果的逻辑和计算部分，但是这个makeParallaxEffect函数应该什么时候被调用呢？这里我们就要利用到 Runtime 的一个重要特性 —— KVO。即当contentOffset发生变化时执行一个回调，这样我们就可以实时地计算视差效果了。
那这个 KVO 在哪里添加呢？我之前添加在了viewDidLoad中，但是发现当 ViewController被 pop 后 app 会 crash。最后我在viewWillDisappear中 remove 掉了这个 KVO，问题得到解决。
但是问题又来了，我们知道，iOS 7之后用户可以通过边缘滑动的方式来返回上一级页面，但如果我们向右滑动的距离不足以让页面返回，那么viewWillDisappear也会被调用，viewWillAppear也会被调用。所以我们索性就把 KVO 添加在viewWillAppear中。
下面看最终的代码：
- (void)viewWillAppear:(BOOL)animated {
[self.tableView addObserver:self forKeyPath:@"contentOffset" options:NSKeyValueObservingOptionNew context:nil];
[UIView beginAnimations:nil context:nil];
[self makeParallaxEffect];
[UIView commitAnimations];
}
- (void)viewWillDisappear:(BOOL)animated {
[UIView beginAnimations:nil context:nil];
self.navigationController.navigationBar.alpha = 1;
[UIView commitAnimations];
[self.tableView removeObserver:self forKeyPath:@"contentOffset"];
}
- (void)observeValueForKeyPath:(NSString *)keyPath ofObject:(id)object change:(NSDictionary<NSString *,id> *)change context:(void *)context {
if (object == self.tableView) {
[self makeParallaxEffect];
}
}
最后不要忘记在viewWillDisappear中把 UINavigationBar 的透明度设置回来。
好了，至此我们就实现了这样一个简单的视差效果。
