使用自动布局实现视图的动画/移动

Question

使用自动布局实现视图的动画/移动

23

我想将一个视图从一个位置移动到另一个位置，我可以使用

self.view.center = CGPointMake(100, 200);

然而，如果项目正在使用Autolayout，则运行后视图将返回到原始位置：

[self.view.superview setNeedsLayout];

那么如何将一个视图实际移动到新的位置呢？

- user1687717

2个回答

14

如果你使用自动布局（autoLayout），那么你必须更改约束（constraints）。建议的方法是在视图控制器中创建约束的输出口（outlet），然后更改约束的常数（constant）。如果你有时间，我强烈建议在这里观看“按例子学习自动布局”或“精通自动布局最佳实践”。它们对我帮助很大。我想重点是，在使用自动布局时，你不再按照框架（frames）来思考。因此，在自动布局中，设置中心点（center）是无效的。一切都关乎视图之间的关系。

- Clint Warner

使用自动布局似乎比使用框架移动视图更难，因为我需要获取该视图的所有出口。 - user1687717

一开始可能会更难，但我现在开始更喜欢它了。你可以用它做更多的事情。 - Clint Warner

这里是@ClintWarner的第二个观点：自动布局在初始设置时可能需要更多的努力，但在维护和可读性方面会带来巨大的回报。现在我已经习惯了实现约束，使用框架数学似乎变得繁琐和令人沮丧。 - followben

我已经寻找这个答案很长时间了。你救了我的一天！ - anka

底部答案是正确的。如果您没有时间观看视频，只需查看下面的答案即可。 - jdog

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RJR · Accepted Answer

启用 AutoLayout 后，我们应该忘记框架，仅考虑约束。是的，即使进行动画，您也不能再更改帧或中心，视图会在调用布局时恢复到原始位置。

相反，您应该考虑更改约束的常量值以获得相同的效果。

考虑像下面给出的图像一样的用户界面。我有一个图像视图，它与其父视图具有20个点的前导空间，这意味着它具有与其父视图的水平空间约束。此外，我还有三个与该图像视图相关联的约束：顶部、宽度和高度。

我将向您展示如何按照图像所示从左到右动画显示图像。

创建IBOutlets以用于需要动画的约束。在这里，我们只采取水平空间约束，这足以将此视图从左到右移动。

@property (weak, nonatomic) IBOutlet UIImageView *imageView;
@property (weak, nonatomic) IBOutlet NSLayoutConstraint *horizontalSpaceConstraint;

在这里输入图片描述

在 Go Away 操作中，我们需要更新此约束的常量值。

- (IBAction)moveFrontAction:(id)sender {
    self.horizontalSpaceConstraint.constant = 220;

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

现在应该将视图移动到右端。我正在一个动画块中执行这个操作，这样我们就能看到一个不错的从左到右和从右到左的动画效果。在生产环境中，我们不应该像这样硬编码数值。这里只是为了让概念更清晰而已。 enter image description here

在“返回”操作中，我们再次将常量重置为其原始值，这样您就可以看到橙色图像回到原始位置的动画效果。

- (IBAction)moveBackAction:(id)sender {
    self.horizontalSpaceConstraint.constant = 20;

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