iOS Facebook 纸像弹出视图控制器

Question

正如标题所说，我正在寻找一种方法来实现一个视图控制器，它以与 Facebook Paper 的通知/消息/朋友请求视图控制器相同的方式呈现自己。

我想要的是有一个图标（就像 Facebook Paper 中的那个），当用户点击它时，一个新的视图控制器会以与纸上几乎相同的动画方式弹出（因为我认为几乎无法进一步完善该动画=))。我希望它成为一个视图控制器，因为它会做一些我想要分离的提升，这意味着不欢迎 UIView 实例。

关于如何滚动这样一个视图控制器的任何线索？
我猜父控制器（显示所有新闻的控制器）实际上是一个UIContainerViewController，它将子控制器添加到自身，然后以这种特定方式为其视图设置动画。

我设法找到了类似的东西 - WYPopoverController。这看起来像是朝着正确的方向拍摄，但需要一些额外的工作和抛光才能实现相同的效果和平滑度。如果需要，我可能会更深入地研究它，但希望你们可以使用更好的东西。 :)

任何线索或线索将不胜感激。

PS。如果您在理解我的意思时遇到任何问题（比如您还没有看过 Paper），请在 cmets 中告诉我，我也会在帖子中获得一些图片。

编辑： Here is a video showing off the feature. 如果你重播足够多次，整个动画就足够可见了。我不是在图标反弹之后（至少没有那么多），因为我对那个过渡本身更感兴趣。如果需要，仍然可以提供更多照片。

Answer 1

好的，我使用日历“弹出”类型视图做了类似的事情，您可以看到 on my blog。

这不是您想要的，但我认为您将能够获得非常接近的匹配。

我在为其制作日历的应用程序中使用了故事板，因此我也将使用故事板来编写此内容。

首先要避免的是应用程序的日历部分使用全新的 ViewController 来管理它。这样做做了几件事。

1. 这意味着我可以将日历的代码与使用它的视图控制器的代码分开。这使它超级容易维护。如果日历需要修复，我在日历视图控制器中进行了修复。

2. 它使日历在需要它的应用程序的任何部分都超级容易使用。因为它在它自己的视图控制器中，所以我只需要呈现它，它就可以在任何地方使用。

那么...我会怎么做。

创建名为MyPopoverViewController 之类的视图控制器并将其添加到情节提要中。现在从您想从哪个视图控制器中创建一个模态转场。如果这是你想要的，即使是从一个按钮。使segue模态。并让它没有动画。

这将立即从您当前的 VC 切换到 MyPopoverVC。

现在您需要 .h 文件中的几个属性。

@property (nonatomic, strong) UIView *backgroundView;
@property (nonatomic, assign) CGPoint startPoint;

现在，在调用它的 VC 中，您需要有类似这样的 prepareForSegue 方法...

- (void)prepareForSegue:(UIStoryboardSegue *)segue sender:(id)sender
{
    if ([segue.identifier isEqualToString:@"myPopoverSegue"]) {
        MyPopoverVC *controller = segue.destinationViewController;

        controller.backgroundView = [self.view snapshotViewAfterScreenUpdates:NO];
        controller.startPoint = // the position of the button that was pressed
    }
}

现在设置弹出视图控制器

首先，确保将 backgroundView 属性添加到 self.view。

[self.view insertSubview:self.backgroundView atIndex:0];

还要确保 backgroundView 与屏幕大小相同。

或者您可以在情节提要中执行此操作。它的作用是获取前一个视图控制器的视图快照并将其放在新视图控制器的后面。这使它看起来像弹出窗口出现在旧 VC 上，而实际上它只是一个屏幕截图。没有这个，新的 VC 将有纯黑色背景（或您设置的任何颜色）。

起点呢

在视图中加载确实做了这样的事情......

- (void)viewDidLoad
{
    ...
    self.theViewYouWantToBounce.frame = CGRectMake(self.startPoint.x, self.startPoint.y, 0, 0);
    ...
}

这会将其放置在起点（按钮所在的位置）并使其大小为零。

我假设您在此关闭了自动布局以保持简单。

好的，那么现在。在viewDidAppear...

- (void)viewDidAppear
{
    [super viewDidAppear];

    [UIView animateWithDuration:0.5
                          delay:0.0
             usingSpringDamping:1.0
          initialSpringVelocity:1.0
                        options:0
                     animations:^{
                         self.theViewYouWantToBounce.frame = CGRectMake(//the end frame of the view
                     }
                     completion:nil];
}

您必须调整设置（阻尼、初始速度），但这会将视图从起点处的当前大小 (0,0) 反弹到您想要的大小和位置。

要隐藏它，只需在关闭视图之前将动画变回零大小。

我希望这是有道理的。

要记住的事情。

1. 在新的视图控制器中执行此操作。
2. 假装它在同一个 VC 中（使用快照）。
3. 在起点使视图非常小。
4. 在视图中确实出现了将其设置为所需大小的动画。

希望这会有所帮助。