如何使用自动布局移动标签并为更改设置动画？

Posted 2023-03-15

【中文标题】如何使用自动布局移动标签并为更改设置动画？

【英文标题】：How do I move a label and animate the change using Auto Layout?

【发布时间】：2013-08-10 16:35:27

【问题描述】：

我正在尝试将 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

【问题讨论】：

你能显示来自界面生成器的屏幕截图吗？标签的文本中心是否对齐？

在我看来，用于更改文本的事务通过强制布局通过（因为标签的内容已更改）干扰了您的动画。我将尝试重现此内容，但与此同时，如果您删除文本更新，定位是否正常工作？

根据您问题中的代码构建一个基本示例项目，我得到了似乎想要的效果 - 标签向左移动，而文本淡入新值。因此，您的项目中可能还有其他原因导致问题。您将需要创建一个重现问题的最小示例才能在此处获得答案。

我以为我有一个简单的答案，但我看到 ios 不支持 NSAutoLayoutConstraint 上的 animator 代理 :( 如果你在常量设置和块之间挤压 [self.view setNeedsUpdateConstraints]; 会发生什么？

【参考方案1】：

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

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

例如：如果我有一个 leftSpacing 约束，我可以直接更改如下：

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

上面的代码将使您的视图从左到右移动 20 个点。

更新：

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

【讨论】：

问题已包含此代码。并且只有 layoutIfNeeded 部分需要在动画块内。