如何实现UILabel与容器视图同步缩放的动画效果？

问题分析 #

当前实现中，容器缩放时UILabel会直接跳转到最终宽度，无法跟随容器边缘平滑动画。原因是手动在layoutSubviews中设置frame，sizeThatFits会直接返回最终状态下的文本布局尺寸，无法生成动画过程中的过渡状态，导致文本与容器动画不同步。

解决方案 #

改用AutoLayout约束替代手动frame设置，让UIKit动画系统自动处理约束的插值变化，实现文本边缘随容器平滑贴合的效果。

修改后的代码 #

1. 重构ContainerView（使用AutoLayout）

class ContainerView: UIView {
    let label: UILabel = {
        let label = UILabel()
        label.numberOfLines = 0
        label.text = "foo bar foo bar foo bar foo bar foo bar foo bar foo foo bar foo bar foo bar foo bar foo bar foo bar foo"
        label.translatesAutoresizingMaskIntoConstraints = false // 关闭自动约束转换
        return label
    }()

    override init(frame: CGRect) {
        super.init(frame: frame)
        backgroundColor = .purple
        addSubview(label)
        
        // 绑定label与容器的边缘约束，宽度自适应容器，高度由文本内容决定
        NSLayoutConstraint.activate([
            label.leadingAnchor.constraint(equalTo: leadingAnchor),
            label.topAnchor.constraint(equalTo: topAnchor),
            label.trailingAnchor.constraint(equalTo: trailingAnchor)
        ])
    }

    required init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
}

2. 优化容器动画（两种方式可选）

方式一：基于frame的动画（兼容原有写法）

class ViewController: UIViewController {
    var container: ContainerView = ContainerView()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(container)
        container.frame = CGRect(x: 0, y: 0, width: 150, height: 150)
        container.center = view.center
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            UIView.animate(withDuration: 2, delay: 0, options: .curveEaseInOut) {
                self.container.frame = CGRect(x: 0, y: 0, width: 200, height: 200)
                self.container.center = self.view.center
                self.container.layoutIfNeeded() // 触发子视图约束更新动画
            }
        }
    }
}

方式二：基于约束的动画（推荐，更符合AutoLayout最佳实践）

class ViewController: UIViewController {
    var container: ContainerView = ContainerView()
    private var containerWidthConstraint: NSLayoutConstraint!
    private var containerHeightConstraint: NSLayoutConstraint!

    override func viewDidLoad() {
        super.viewDidLoad()
        view.addSubview(container)
        container.translatesAutoresizingMaskIntoConstraints = false
        
        // 定义容器的宽高约束
        containerWidthConstraint = container.widthAnchor.constraint(equalToConstant: 150)
        containerHeightConstraint = container.heightAnchor.constraint(equalToConstant: 150)
        
        // 绑定容器到屏幕中心
        NSLayoutConstraint.activate([
            container.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            container.centerYAnchor.constraint(equalTo: view.centerYAnchor),
            containerWidthConstraint,
            containerHeightConstraint
        ])
        
        DispatchQueue.main.asyncAfter(deadline: .now() + 2) {
            UIView.animate(withDuration: 2, delay: 0, options: .curveEaseInOut) {
                // 修改约束常量触发动画
                self.containerWidthConstraint.constant = 200
                self.containerHeightConstraint.constant = 200
                self.view.layoutIfNeeded() // 触发整个视图树的约束更新
            }
        }
    }
}

原理说明 #

使用AutoLayout后，UIKit动画系统会在动画的每一帧自动计算约束的插值状态，实时更新label的宽度和文本布局，从而让文本右侧始终贴合容器右边缘，实现平滑的过渡动画。

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