Tweetbot就像缩小视图转换一样

Question

有谁知道如何实现当前视图控制器的视图缩小并在透明度上放置另一个视图？当您点击导航栏左上角的头像时,可以在Tweetbot 3中实现.我应该拍快照吗？

Tweetbot过渡我的意思是http://www.yoeri.me/files/tweetbot-transition.gif

Answer 1

为了实现这种效果，您必须从头开始重建视图堆栈。

因此，由于不可能更改 的viewController.view框架，因此您必须添加一种容器子视图，如下所示：

@implementation ViewController
@synthesize container;

- (void)viewDidLoad {
    [super viewDidLoad];

    container = [[UIView alloc] initWithFrame:self.view.frame];
    [self.view addSubview:container];
    // add all views later to this insted of self.view

    // continue viewDidLoad setup
}

现在，如果你有了这个，你可以像这样设置收缩行为的动画：

[UIView animateWithDuration:.5 animations:^{
        container.frame = CGRectMake(10, 17, self.view.frame.size.width-20, self.view.frame.size.height-34);
    }];

好的，我假设您正在为 iOS 7 进行开发，因此我们将在这里使用一些新的 API（对于早期版本，有替代框架）。现在，由于 WWDCUIView有一个resizableSnapshotViewFromRect:(CGRect) afterScreenUpdates:(BOOL) withCapInsets:(UIEdgeInsets)返回单个UIView对象的方法。

[UIView animateWithDuration:.5 animations:^{
        container.frame = CGRectMake(10, 17, self.view.frame.size.width-20, self.view.frame.size.height-34);
    } completion:^(BOOL finished) {
        UIView *viewToBlur = [self.view resizableSnapshotViewFromRect:container.frame afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero];   
    }];

如果您不想重写视图管理，您也可以首先以这种方式拍摄主视图的快照，将其设置到容器，然后仅对图像进行动画处理。但请记住，此时您无法与捕获的视图进行交互。

完成后，您可以从此存储库下载两个类别文件（它们来自 WWDC，所以直接来自 Apple！）。基本上，他们所做的就是向类中添加一些很酷的新方法UIView，我们将使用其中的applyDarkEffect. 我还没有对此进行测试，也许另一种方法更适合您的需求。

无论如何，如果我们将其实现到块中，并且可能还添加一个UIImageView来显示模糊的叠加层，它应该看起来像这样：

[UIView animateWithDuration:.5 animations:^{
        container.frame = CGRectMake(10, 17, self.view.frame.size.width-20, self.view.frame.size.height-34);
    } completion:^(BOOL finished) {
        UIView *viewToBlur = [self.view resizableSnapshotViewFromRect:container.frame afterScreenUpdates:YES withCapInsets:UIEdgeInsetsZero];
        UIImage *image = [viewToBlur applyDarkEffect];
        UIImageView *blurredView = [[UIImageView alloc] initWithFrame:self.view.frame];
        [self.view addSubview:blurredView];

        // optionally also animate this, to achieve an even smoother effect
        [blurredView setImage:image];

    }];

然后，您可以将您的SecondViewController视图添加到堆栈顶部，以便仍会调用它的委托方法。传入帐户视图的弹跳效果可以通过新的 UIView 动画方法来实现animateWithDuration:(NSTimeInterval) delay:(NSTimeInterval) usingSpringWithDamping:(CGFloat) initialSpringVelocity:(CGFloat) options:(UIViewAnimationOptions) animations:^(void)animations completion:^(BOOL finished)completion（更多内容请参见文档）

我希望这会对您的项目有所帮助。