如何使用自动布局移动标签并进行动画变化？

Question

我想将一个UILabel向左移动并以动画的形式呈现出来。该UILabel是从故事板创建的，并具有以下约束条件：

但如果我尝试将尾随空间常数设置为150而不是20来将其向左移动，它会奇怪地弹回到左侧一秒钟，然后又回到中间。因此，我将左侧引导约束的优先级降低到900，但仍然发生了同样的事情。

所以我尝试了：

self.textToReadLabel.transform = CGAffineTransformMakeTranslation(-500.0, 0.0);

这会使它移动，但如果我使用动画，它会滑出屏幕，然后滑回来，最后停在应该停留的位置......经过所有这些戏剧性的表演。

我应该如何实现这个效果？

当我点击按钮移动标签时发生的全部内容：

        self.textHorizontalPlacementConstraint.constant = 150.0;
        self.textHorizontalPlacementConstraint2.constant = -110.0;
        [UIView animateWithDuration:1.0 animations:^{
            [self.view layoutIfNeeded];
        }];

        CATransition *animation = [CATransition animation];
        animation.duration = 0.5;
        animation.type = kCATransitionFade;
        animation.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        [self.textToReadLabel.layer addAnimation:animation forKey:@"changeTextTransition"];

        // Change the text
        self.textToReadLabel.text = @"text";
    }

视频演示:

http://cl.ly/3l2E401N3Q3h

（注：此视频为it技术相关内容，展示其外观）

- Doug Smith

---

你能展示一下Interface Builder的屏幕截图吗？标签的文本是否居中对齐？ - jrturton

在我看来，用于更改文本的事务正在干扰您的动画，强制进行布局传递（因为标签的内容已更改）。 我将尝试复制此问题，但同时如果您删除文本更新，位置处理是否正确？ - jrturton

基于您提供的代码，我建立了一个基本的示例项目，看起来已经实现了所需的效果 - 标签向左移动，同时文本淡出到新值。因此，您的项目中可能还有其他原因导致问题。您需要创建一个最小化的示例来重现该问题，以便在这里获得答案。 - jrturton

我本以为我能给你一个简单的答案，但是我发现iOS不支持在NSAutoLayoutConstraint上使用animator代理 :( 如果你在常量设置和代码块之间加入[self.view setNeedsUpdateConstraints];会发生什么呢？ - Brad Allred

Answer 1

您可以在Interface Builder中设置约束的输出口，然后当您想要动画更改时，修改您的代码如下：

    [UIView animateWithDuration:2.0 animations:^{
        //Change your constraints from code.
    }];

例如：如果我有一个左侧间距的约束，我可以直接按照以下方式更改：

    [UIView animateWithDuration:2.0 animations:^{
        //Change your constraints from code.
        self.leftSpacing.constant = self.leftSpacing.constant+20;
        [self.view layoutIfNeeded];
    }];

上述代码将使您的视图从左到右以20个点的速度动画化。

更新：

您是否尝试添加多个约束条件：例如，间距值应小于或等于200，但大于或等于20。我认为这可能会有所帮助。

- Geekoder

---

问题已经包含了这段代码。只有layoutIfNeeded部分需要放在动画块中。 - jrturton