Tweetbot就像缩小视图转换一样

时间:2013-12-13 13:34:22

标签: ios objective-c ios7 transition

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

The Tweetbot transition I mean http://www.yoeri.me/files/tweetbot-transition.gif

1 个答案:

答案 0 :(得分:3)

为了达到此效果,您必须从头开始重建视图堆栈。

因为没有可能改变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(对于早期版本,有替代框架)。现在,因为WWDC UIView有一个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];   
    }];

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

如果你有这个,你可以从this repo下载两个类别文件(它们来自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实现(documentation中的更多信息)

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