iOS 实现在 UITableView 顶部加入视差图片的效果

视差效果是我们在许多 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设置为图片的中上位置

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 的透明度设置回来。

好了，至此我们就实现了这样一个简单的视差效果。