ios - 两个 View 交易布局动画(包括 Z 顺序)

Question

我有两个 View ，一个 UIImageView 显示用户选择的照片，另一个 MKMapKitView 显示用户选择的对象位置。静止时， View 排列如下:

当用户点击 View 2 时，我希望两者交换位置。反之亦然。两个 View 都定位有约束。所以我可以做一个动画，我首先获取两组约束，然后清除它们，然后以翻转顺序应用它们，但 z 顺序不会切换。无论哪个 View 处于“小”模式，都应该位于另一个 View 之上。

我真的很希望能够为它制作动画，使交换变得明显。以某种方式让它看起来像在旋转:

完成此任务的最简单方法是什么？我尝试了以下方法:

- (IBAction)swapPreview {
    NSArray *photoConstraints = self.photoView.constraints;
    NSArray *mapConstraints = self.mapView.constraints;
    [self.photoView removeConstraints: photoConstraints];
    [self.mapView removeConstraints: mapConstraints];
    NSLog(@"photoConstraints %@", photoConstraints);
    NSLog(@"mapConstraints %@", mapConstraints);
    CGRect biggerFrame = CGRectUnion(self.photoView.frame, self.mapView.frame);
    CGRect upperFrame = CGRectOffset(RectCenterScaled(biggerFrame, 0.5), 0, biggerFrame.size.height / -4);
    CGRect lowerFrame = CGRectOffset(upperFrame, 0, upperFrame.size.height);
    [UIView animateWithDuration: 0.4 delay: 0 options: UIViewAnimationOptionCurveLinear animations:^{
        self.photoView.frame = upperFrame;
        self.mapView.frame = lowerFrame;
    } completion:^(BOOL finished) {
        UIView *container = self.photoView.superview;
        [self.photoView addConstraints: mapConstraints];
        [self.mapView addConstraints: photoConstraints];
        [container exchangeSubviewAtIndex: [container.subviews indexOfObject: self.photoView] withSubviewAtIndex:[container.subviews indexOfObject: self.mapView]];
        [UIView animateWithDuration: 0.4 delay: 0 options: UIViewAnimationOptionCurveLinear animations:^{
            [container updateConstraints];
        } completion:^(BOOL finished) {

        }];
    }];
}

但是当我尝试交换约束时，这会在第二个动画 block 上中断。那么更好的方法是什么？我可以遍历 View 层次结构中的所有约束，交换引用两个 View 的任何 firstItem/secondItem。但是对于较小 View 而言局部的约束需要改变局部性。

我开始怀疑我是否不应该只创建一个具有两个子项的自定义 UIView 子类并直接进行布局，而不是弄乱约束内容。

Answer 1

我制作了测试项目和类，它们的行为如你所愿:

@interface ViewController ()
                                                                  //initial constants values
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view1Top;//0
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view2Top;//20
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view1Left;//0
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view2Left;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view1Height;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view2Height;//100
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view1Width;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *view2Width;//50
@property (weak, nonatomic) IBOutlet UIView *view1;
@property (weak, nonatomic) IBOutlet UIView *view2;

@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

}
- (void)viewWillAppear:(BOOL)animated{
    //setting initial values for constraints related to view size
    self.view1Width.constant = self.self.view.frame.size.width;
    self.view1Height.constant = self.self.view.frame.size.height;
    self.view2Left.constant = self.view.frame.size.width - 20 - self.view2Width.constant;
}
- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (IBAction)animate:(id)sender {

    CGFloat gap = 20.0;
    CGFloat height = (self.view.frame.size.height - 3*gap)/2; //height of views in the middle of animation
    CGFloat width = self.view.frame.size.width - 40; //width of views in the middle of animation
    self.view1Top.constant = gap;
    self.view1Height.constant = height;
    self.view2Top.constant = height + 2*gap;
    self.view2Height.constant = height;
    self.view1Left.constant = self.view2Left.constant = gap;
    self.view1Width.constant = self.view2Width.constant = width;

     [UIView animateWithDuration:4.0 delay:0 options:0 animations:^{
         [self.view layoutIfNeeded];
             } completion:^(BOOL finished) {

         [self.view exchangeSubviewAtIndex: [self.view.subviews indexOfObject: self.view1] withSubviewAtIndex:[self.view.subviews indexOfObject: self.view2]];
                 self.view2Top.constant = 0;
                 self.view2Left.constant = 0;
                 self.view2Height.constant = self.view.frame.size.height;
                 self.view2Width.constant = self.view.frame.size.width;

                 self.view1Top.constant = gap;
                 self.view1Width.constant = 50;
                 self.view1Height.constant = 100;
                 self.view1Left.constant = self.view.frame.size.width - self.view1Width.constant - gap;

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

     }];
}

@end

view1 是红色 View ，view2 是蓝色 View 。

animate 是在我的案例中通过点击按钮启动的 Action 。

关键不在于移除约束，而只是动画常量属性。