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

Question

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

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

这工作得很好，给人一种自然的感觉。

但是，当我在使用自动布局在故事板上定义的视图上使用它时，事情开始变得一团糟——在这个动画之后，视图被调整大小并移动。

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

Answer 1

如何设置约束更改的动画？：

您需要在动画块内调用layoutIfNeed。Apple实际上建议您在动画块之前调用一次，以确保所有挂起的布局操作都已完成。

从iOS：如何设置新自动布局约束（高度）的动画：

更新约束后：

[UIView animateWithDuration:0.5 animations:^{[self.view layoutIfNeeded];}];

替换self。参照包含的视图查看。

Answer 2

我的猜测是，动画是通过动画层的~变换来执行的，并且该变换是从锚点位置所在的点应用的。您可以尝试用两种方法解决此问题：

第一：确保通过中心约束来定位视图，即对齐要变换的视图的中心（不是左视图、顶部视图、尾部视图等等）。例如，如果两个视图都有，则在superview中居中显示“水平垂直”，这（不确定）可能会有所帮助。

第二：创建包装视图，将这些视图作为子视图，并禁用它们的自动布局。

Answer 3

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

但是，有一种简单的方法可以修改您已经使用的代码，使其与Auto Layout保持一致。这样做的方法是（1）在您订购动画之前将firstView和ii dView添加到您的视图层次结构中，（2）确保您添加了定义这两个视图布局的Auto Layout约束，以及（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选项，方法将实际操作视图层次并添加新的目标视图。如果启用了自动布局，则不会正确布局，因为它没有约束。

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

或者，您还可以使用现有的对transtionFromView： toView：期限：选项：完成：的调用。但是，如果您不打算只显示已经有约束的目标视图，那么您需要使用完成块来添加这些约束，如下所示：

    [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