ios - 使用 AutoLayout 将 UIImageView 从中心动画化到距父 UIView 顶部 20 点

Question

当我在没有垂直和水平居中的情况下对 UIImageView 和父 UIView 顶部之间的距离使用约束时，动画本身会起作用。

UIImageView 的约束:

• 宽度:240
• 高度:128
• Top space to Top Layout: 200 --> 连接到 logoImageViewVerticalSpaceConstraint

当我使用它时动画效果很好:

self.logoImageViewVerticalSpaceConstraint.constant = 20;

[UIView animateWithDuration: 1.0
                      delay: 0
                    options:(UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction)                     
                 animations:^{[self.logoImageView layoutIfNeeded];}
                 completion:^(BOOL finished) {NSLog(@"Finished animation"); }];

当我不想使用静态空间到顶部布局约束时，问题就出现了，因为 imageview 需要在 3.5 和 4 英寸设备上居中。为了解决这个问题，我想从垂直和水平中心约束开始。

• 宽度:240
• 高度:128
• 将中心 x 对齐到:superview --> 连接到 logoImageViewYCenterConstraint
• 将中心 y 对齐到:superview

现在我想我可以简单地删除 y 中心约束并自己将空间添加到 20pt 的顶部布局约束:

[self.logoImageView removeConstraint:self.logoImageViewYCenterConstraint];

NSLayoutConstraint *topSpaceConstraint = [NSLayoutConstraint  
constraintWithItem:self.view                                                                         attribute:NSLayoutAttributeTop
relatedBy:NSLayoutRelationEqual                                                                                    toItem:self.logoImageView
attribute:NSLayoutAttributeTop                                                                                multiplier:1
constant:20];
    [self.view addConstraint:topSpaceConstraint];

    [UIView animateWithDuration: 1.0
                          delay: 0
                        options:(UIViewAnimationOptionCurveEaseInOut|UIViewAnimationOptionAllowUserInteraction)                     
                        animations:^{
                           [self.logoImageView layoutIfNeeded];
                        }
                        completion:^(BOOL finished) { 
                           NSLog(@"Finished animate"); 
                        }];

结果是 UIImageView 保持居中并且有点膨胀。这与我期望发生的情况完全相反，因为我删除了 x 中心约束。将距离为 20pt 的顶部约束添加到父 UIView 的顶部，我没有触及任何其他约束(如宽度和高度)。

Answer 1

一个 NSLayoutConstraint 有一个或两个它约束的 View 。在您的例子中， View 是 self.logoImageView 和 self.view。

要产生任何效果，约束必须安装在 View 上，而不仅仅是任何 View 。约束必须安装在两个受约束 View 的共同祖先上。 (请注意， View 被视为其自身的祖先。)当您删除约束时，您必须将其从安装它的 View 中删除。

您正在尝试从 self.logoImageView 中删除居中约束，但无法在该 View 上安装该约束。

从 iOS 8.0 开始，卸载约束的首选(也是最简单)方法是将其 active 属性设置为 NO:

self.logoImageViewYCenterConstraint.active = NO;

在 iOS 8.0 之前，您必须将其从安装它的 View 中删除。约束可能安装在 self.view 上。所以试试这个:

[self.view removeConstraint:self.logoImageViewYCenterConstraint];

另请注意，如果您想将 ImageView 动画化回中心，您需要卸载 topSpaceConstraint 并重新安装 self.logoImageViewYCenterConstraint。

处理此问题的另一种方法是同时安装两个 约束，但给予其中一个较低的优先级。当你需要改变 ImageView 的位置时，改变约束的优先级。因此:

- (void)viewDidLoad {
    [super viewDidLoad];
    if (self.topSpaceConstraint == nil) {
        self.topSpaceConstraint = [NSLayoutConstraint constraintWithItem:...];
        self.topSpaceConstraint.priority = 1;
        [self.view addConstraint:self.topSpaceConstraint];
    }
}

- (void)setImageViewCenteredVertically:(BOOL)isCentered animated:(BOOL)animated {
    if (isCentered) {
        self.topSpaceConstraint.priority = 1;
        self.logoImageViewYCenterConstraint.priority = UILayoutPriorityRequired;
    } else {
        self.topSpaceConstraint.priority = UILayoutPriorityRequired;
        self.logoImageViewYCenterConstraint.priority = 1;
    }

    if (animated) {
        [UIView animateWithDuration:1 delay:0
            options:UIViewAnimationOptionCurveEaseInOut | UIViewAnimationOptionAllowUserInteraction
            animations:^{
                [self.view layoutIfNeeded];
            }
            completion:nil];
    }
}