问题*只有一个*动画块（UILabel）使用AutoLayout

Question

我正在使用AutoLayout并且正在动画各种约束更改而没有任何问题。但是，VC中有一个UILabel根本不会动画。我想要的动画是一种擦拭效果。我已经设置了一个计时器，根据rdelmar的建议，因为UILabel不支持动画约束，并且我得到了我想要的只有一行长的标签的效果。但是，多行的标签不会产生类似擦拭的效果，而是字符正在包装，并且标签的宽度会增加。以下是我如何设置标签的约束。

- (void)initializeLabelWithMessage:(NSDictionary *)message {
    meaningLabel.text = [messagingSubMethods meaningStringForLabelFromMessage:message];        
    meaningLabel.numberOfLines = _expectedNumberOfLines;

    float meaningLabelHeight;
    if (_expectedNumberOfLines == 2) {
        meaningLabelHeight = 32;
    } else if (_expectedNumberOfLines == 3) {
        meaningLabelHeight = 48;
    } else {
        meaningLabelHeight = 18;
    }

    _meaningWidthConstraint.constant = 0;
    _meaningHeightConstraint.constant = meaningLabelHeight;
    [self.view layoutIfNeeded];
}

以下是我制作动画的方法＆＃39;标签的宽度，只有numberOfLines为1时才能给我想要的效果。

- (void)startMeaningAnimationTimer {
    _meaningAnimationTimer = [NSTimer timerWithTimeInterval:0.05 target:self selector:@selector(increaseMeaningLabelWidth) userInfo:nil repeats:YES];
    [[NSRunLoop mainRunLoop] addTimer:_meaningAnimationTimer forMode:NSDefaultRunLoopMode];
    [_meaningAnimationTimer fire];
}

- (void)increaseMeaningLabelWidth {
    if (_meaningWidthConstraint.constant < _expectedMeaningWidth) {
        _meaningWidthConstraint.constant = _meaningWidthConstraint.constant + 1;
        [self.view layoutIfNeeded];
    } else
        [self stopMeaningAnimationTimer];
}

以下代码是我在Rob的建议之后添加的代码。第一个是我最初尝试将他的代码与我的代码集成。第二次尝试是看我是否可以复制并粘贴＆＃39;他的代码在。

- (void)attempt1 {
    _meaning1WidthConstraint.constant = 0;
    [self.view layoutIfNeeded];
    [UIView animateWithDuration:0.5 animations:^{
        _meaningWidthConstraint.constant = expectedWidth;
        [self.view layoutIfNeeded];
    } completion:^(BOOL finished) {
        _meaning1WidthConstraint.constant = expectedWidth;
        [self.view layoutIfNeeded];
    }];
}

- (void)attempt2 {
    _meaning1WidthConstraint.constant = [meaningLabel1 sizeThatFits:CGSizeMake(expectedWidth, CGFLOAT_MAX)].width;
    [meaningLabel1 layoutIfNeeded];

    // Now animate the container.
    _meaning1WidthConstraint.constant = _meaning1WidthConstraint.constant;
    [UIView animateWithDuration:2 animations:^{
        [meaningLabel1.superview layoutIfNeeded];
    }];
}

Answer 1

我不认为用NSTimer制作动画是一种很好的方法。

我猜你想要这样的东西：

我将标签放在容器视图中，并为容器视图的框架设置动画（通过约束）。这是我的场景大纲：

所以，我在标签上有宽度和高度限制，并且我在容器视图（标签的超级视图）上也有宽度和高度限制。这些宽度和高度限制的大小并不重要，因为我会在代码中设置它们。我对标签有限制，将其固定到容器的顶部和左侧边缘。我对容器的约束在其父对象（场景的根视图）中居中。

我检查了容器的“剪辑子视图”（在属性检查器中），并且我将标签的视图模式设置为“左上角”（默认为“左”）。 / p>

在我的视图控制器中，我有标签的出口，标签的宽度和高度限制，以及容器的宽度和高度限制：

@interface ViewController ()
@property (strong, nonatomic) IBOutlet UILabel *label;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *labelContainerWidthConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *labelContainerHeightConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *labelWidthConstraint;
@property (strong, nonatomic) IBOutlet NSLayoutConstraint *labelHeightConstraint;
@end

当视图加载时，我需要设置小尺寸的约束，所以我假装轻按了小按钮，但我禁用了动画：

- (void)viewDidLoad {
    [super viewDidLoad];
    [UIView performWithoutAnimation:^{
        [self smallButtonWasTapped:self];
    }];
}

点击“小”按钮时，我想为容器的框架设置动画。我有一个硬编码的宽度，但是我想通过询问标签，如果它是一条线高，它会以编程方式计算出高度。但是，我真的不希望它高一行，所以我暂时更改了numberOfLines：

- (IBAction)smallButtonWasTapped:(id)sender {
    self.labelContainerWidthConstraint.constant = 150;
    self.label.numberOfLines = 1;
    self.labelContainerHeightConstraint.constant = [self.label sizeThatFits:CGSizeMake(CGFLOAT_MAX, CGFLOAT_MAX)].height;
    self.label.numberOfLines = 0;

然后我在动画块内执行布局，以便布局更改动画：

    [UIView animateWithDuration:2 animations:^{
        [self.label.superview layoutIfNeeded];
    }

请注意，我还没有修改标签的约束，因此它会保留相同的框架和内容。它不会回流，这似乎是你的主要抱怨。

动画完成后，我想显示一个省略号来表示不再可见的内容，因此在完成版块中，我执行更改标签＆＃39; s lineBreakMode和约束：

      completion:^(BOOL finished) {
        if (finished) {
            self.label.lineBreakMode = NSLineBreakByTruncatingTail;
            self.labelWidthConstraint.constant = self.labelContainerWidthConstraint.constant;
            self.labelHeightConstraint.constant = self.labelContainerHeightConstraint.constant;
        }
    }];

但我没有为布局设置动画，因此标签会立即变为显示省略号。

当点击“大”按钮时，我想立即删除省略号并使标签全尺寸，以便用户不会看到丢失或回复文字：

- (IBAction)bigButtonWasTapped:(id)sender {
    // First, get rid of the ellipsis and resize the label without animation.
    self.label.lineBreakMode = NSLineBreakByWordWrapping;
    self.label.numberOfLines = 0;
    self.labelWidthConstraint.constant = 300;
    self.labelHeightConstraint.constant = [self.label sizeThatFits:CGSizeMake(self.labelWidthConstraint.constant, CGFLOAT_MAX)].height;
    [self.label layoutIfNeeded];

然后我可以设置容器的约束以匹配标签，并为布局设置动画：

    // Now animate the container.
    self.labelContainerWidthConstraint.constant = self.labelWidthConstraint.constant;
    self.labelContainerHeightConstraint.constant = self.labelHeightConstraint.constant;
    [UIView animateWithDuration:2 animations:^{
        [self.label.superview layoutIfNeeded];
    }];
}

我上传了我的项目to this github repository。