使用自动布局时如何制作从一个 UIView 到另一个 UIView 的翻转动画？

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

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

这个效果很好，翻转效果看起来很自然。

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

有什么办法可以animate这种通过动画约束的翻转？

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

使用显示/隐藏过渡选项

但是，有一种简单的方法可以修改您已经使用的代码，使其与自动布局保持一致。这样做的方法是（1）添加你的firstView and secondView到你的视图层次结构before您订购动画，(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 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 https://github.com/algal/AutoLayoutFlipDemo2