使用自动布局时如何从一个UIView到另一个UIView进行翻转动画？

Question

我总是习惯使用以下代码在一个视图和另一个视图之间制作翻转动画:

        [UIView transitionFromView:firstView
                        toView:secondView
                      duration:0.6
                       options:UIViewAnimationOptionTransitionFlipFromLeft
                    completion:^(BOOL finished) {
                        // finish code here
                    }];

这很好用,给人一种自然的翻转.

但是当我在使用自动布局的故事板上定义的视图上使用它时,事情开始变得混乱 - 视图在此动画之后被调整大小并移动.

有没有办法通过设置约束动画来制作这种翻转动画？

Answer 1

自动布局只能用于定位和调整视图大小.它不能用于产生产生翻转过渡效果所需的核心动画变换.所以简短的答案是否定的,没有办法通过设置约束来动画这种翻转.

使用显示/隐藏转换选项

但是,有一种简单的方法可以修改您已使用的代码,使其与自动布局保持一致.这样做的方法是(1)在订购动画之前添加你的firstView和secondView你的视图层次结构,(2)确保你已经添加了定义这两个视图布局的自动布局约束,以及(3)向动画添加选项,以便您只显示/隐藏两个视图,而不是拆除并设置新的视图层次结构.

换句话说,你需要这样的东西:

        // assert: secondView added to view hierarchy
        // assert: secondView.hidden == true
        // assert: secondView has correct constraints
        [UIView transitionFromView:firstView
                            toView:secondView
                           duration:0.6
                            options:UIViewAnimationOptionTransitionFlipFromLeft | UIViewAnimationOptionShowHideTransitionViews
                         completion:nil];

为什么这需要什么？原因是,如果没有该UIViewAnimationOptionShowHideTransitionViews选项,该方法transitionFromView:toView:duration:options:completion:将实际操作视图层次结构并添加新的目标视图.如果启用了自动布局,则它将无法正确布局,因为它没有约束.

您可以在此处看到显示此方法的示例项目:https://github.com/algal/AutoLayoutFlipDemo

使用视图层次结构操作

或者,您也可以使用现有的电话transitionFromView:toView:duration:options:completion:.但是,如果您不打算仅显示已经存在约束的目标视图,那么您需要使用完成块来添加这些约束,如下所示:

    [UIView transitionFromView:firstView
                        toView:secondView
                       duration:0.6
                        options:UIViewAnimationOptionTransitionFlipFromLeft
                     completion:^(BOOL finished) {
 [self.view addConstraint:[NSLayoutConstraint                               
  constraintWithItem:secondView
  attribute:NSLayoutAttributeCenterX
  relatedBy:NSLayoutRelationEqual
  toItem:self.view
  attribute:NSLayoutAttributeCenterX
  multiplier:1 constant:0]];

 [self.view addConstraint:[NSLayoutConstraint constraintWithItem:secondView
  attribute:NSLayoutAttributeCenterY
  relatedBy:NSLayoutRelationEqual
  toItem:self.view
  attribute:NSLayoutAttributeCenterY
  multiplier:1 constant:0]];
                }];

这种方法的一个工作示例如下:https://github.com/algal/AutoLayoutFlipDemo2