表格视图分割动画转场

Question

我正在开发一个自定义动画过渡效果，它应该像这样工作：

User taps cell in table view,
table view splits underneath the selected cell,
bottom half translates down, upper half translates up to reveal destination view

很遗憾，我在将视图分成两个部分方面遇到了麻烦。我的想法是创建两个视图的快照，然后修改这些快照的边界，一个表示底部，一个表示顶部，隐藏视图并转换快照。

但是，有两个问题：1）如果源视图隐藏或更改alpha，则快照也会发生变化（因为拍摄快照的唯一方法是将它们作为源视图的子视图）。2）目标视图出现晚了，在黑屏后才出现。

对于问题有什么想法吗？或者可能采取新的方向吗？

以下是代码：

@interface ExpandTableViewSegue()

// there are these also in header
// UIImageView *topView;
// UIImageView *bottomView;

@property (strong, nonatomic) UIView *containerView;
@property (strong, nonatomic) UIViewController *imageContainerViewController;

@property (strong, nonatomic) UIView *backgroundView;

@property (strong, nonatomic) UINavigationController *navigationController;

@end

@implementation ExpandTableViewSegue


- (void)perform {
    self.navigationController = [self.sourceViewController navigationController];

    [self pushDestinationControllerToNavigationStack];
    self.backgroundView = [[self.destinationViewController view] snapshotView];
    [self popTopMostControllerOffStack];

    [self pushImageContainerControllerToNavigationStack];
    [self animateImagesInContainerView];
}

- (void)pushDestinationControllerToNavigationStack {
    [self.navigationController pushViewController:self.destinationViewController animated:NO];
}

- (void)pushImageContainerControllerToNavigationStack {
    UIViewController *imageContainerController = [self imageContainerViewController];

    [self.navigationController pushViewController:imageContainerController animated:NO];
}

- (void)animateImagesInContainerView {
    [UIView animateWithDuration:2.0 delay:0.0 options:UIViewAnimationOptionCurveEaseIn animations:^{

        [[self.sourceViewController view]removeFromSuperview];
        [self translateTopImageUp];
        [self translateBottomImageDown];
        [self.containerView removeFromSuperview];
    }
    completion:^(BOOL finished) {
        if (finished) {
            [self popTopMostControllerOffStack];
            [self pushDestinationControllerToNavigationStack];
        }
    }];
}

编辑1:（更新代码）我解决了第一个问题......我创建了一个容器视图，里面包含了两个快照图像，然后将该视图推到导航栈上，在执行动画之前。 但是我仍然遇到了第二个问题，它涉及到目标控制器何时被推到堆栈上。 我想要的是动画逐渐显示目标视图下方。但是现在它显示一个黑屏（当前视图），然后弹出到目标视图。

我的尝试解决方案是快速将目标视图推到堆栈上，拍摄快照，然后将其从堆栈中弹出。 然后继续执行该过程，但将新的快照添加到背景中，使它出现在前两个快照的后面。

还有其他新的想法吗？谢谢！

- user1869469

---

你能在这里更新代码吗？你是如何分割tableview的？ - Abhishek Thapliyal

Answer 1

你的方法很好。我会先拍摄快照，然后在-prepareForSegue:方法中将它们传递给目标视图控制器。让目标视图控制器处理它们，并在动画完成后删除它们。 或者，如果你已经对segue进行了子类化，也可以将图片传递给segue。

- Nick Terry

---

感谢您提供的输入！我现在已经从源视图控制器将顶部和底部图像发送到了Segue子类，然后Segue处理动画。 - user1869469