如何让带约束的UILabel尺寸变化动画流畅无突兀？

问题根源 #

你遇到的初始闪屏问题，核心是第一次调用动画方法时，四个Label的初始约束状态不正确。默认情况下（比如Storyboard里的初始约束值），Label的高度可能不是你期望的0.25倍容器高度，导致动画前的[self layoutIfNeeded]会先把这个错误的初始布局渲染到屏幕上，之后才开始动画到正确的均分状态，所以会出现短暂的背景显露。

具体修复步骤 #

1. 提前设置初始约束值 #

在视图初始化阶段（比如viewDidLoad或者自定义View的initWithFrame:/initWithCoder:方法中），先把四个高度约束的constant设置为初始的均分状态，并立即触发布局，确保视图一开始就处于正确的初始状态：

- (void)viewDidLoad {
    [super viewDidLoad];
    // 确保nHeightOfPieBar已正确获取容器的实际高度
    self->_outletBucketMastersHeight.constant = 0.25 * nHeightOfPieBar;
    self->_outletBucketMeetsHeight.constant = 0.25 * nHeightOfPieBar;
    self->_outletBucketApproachesHeight.constant = 0.25 * nHeightOfPieBar;
    self->_outletBucketDidNotMeetHeight.constant = 0.25 * nHeightOfPieBar;
    [self layoutIfNeeded];
}

2. 调整动画方法的逻辑 #

修改你的relayoutSubviewsAnimated方法，去掉动画块内的初始均分设置逻辑，让动画始终是从当前状态平滑过渡到下一个状态：

-(void)relayoutSubviewsAnimated {
    static int ctr = 1;

    // 动画前确保当前布局已生效（此时初始状态已为均分）
    [self layoutIfNeeded];
    
    [UIView animateWithDuration:1.5
                     animations:^{
                         if (ctr == 1) {
                             // 从均分状态动画到第二个状态
                             self->_outletBucketMastersHeight.constant = 0.2 * nHeightOfPieBar;
                             self->_outletBucketMeetsHeight.constant = 0.1 * nHeightOfPieBar;
                             self->_outletBucketApproachesHeight.constant = 0.4 * nHeightOfPieBar;
                             self->_outletBucketDidNotMeetHeight.constant = 0.4 * nHeightOfPieBar;
                             ctr++;
                         }
                         else if (ctr == 2) {
                             // 从第二个状态动画回均分状态
                             self->_outletBucketMastersHeight.constant = 0.25 * nHeightOfPieBar;
                             self->_outletBucketMeetsHeight.constant = 0.25 * nHeightOfPieBar;
                             self->_outletBucketApproachesHeight.constant = 0.25 * nHeightOfPieBar;
                             self->_outletBucketDidNotMeetHeight.constant = 0.25 * nHeightOfPieBar;
                             ctr = 1;
                         }
                         [self layoutIfNeeded];
                     }];
}

额外注意事项 #

• 确保nHeightOfPieBar是容器View的实际高度，避免在视图布局完成前获取（比如不要在viewDidLoad里直接取self.frame.size.height，可以在viewDidLayoutSubviews中更新这个值）。
• 检查四个Label的垂直约束是否正确：第一个Label的top绑定容器top，第二个Label的top绑定第一个Label的bottom，第三个绑定第二个的bottom，第四个的bottom绑定容器bottom，这样高度变化时Label会自动紧密贴合，不会出现间隙。

内容的提问来源于stack exchange，提问作者Alyoshak