Swift中AutoLayout下UILabel左右移动动画失效问题排查

你遇到的是AutoLayout环境下做动画的典型误区，我来帮你拆解问题并给出可行的解决方案：

你的代码核心问题： #

• AutoLayout与直接修改frame冲突：当启用AutoLayout后，视图的frame是由约束自动计算生成的。你先修改frame.origin.x，紧接着调用view.layoutIfNeeded()，系统会立刻根据原始约束重新计算布局，直接把你手动修改的frame值覆盖回去，等于白做了更改，自然看不到动画效果。
• 动画时机错误：viewDidLoad执行时，视图还没完成初始布局，此时视图的frame还不是最终的布局结果，这时候启动动画，起始状态本身就不正确，动画无法按预期运行。

正确的解决思路： #

AutoLayout的核心是约束驱动布局，要实现动画，必须通过修改约束属性，再让系统在动画闭包里重新计算布局。具体步骤如下：

1. 给约束添加IBOutlet：在Storyboard中，给Text1和Text2的水平位置相关约束添加IBOutlet（比如如果Text1原本偏离中心左侧，就给它的centerX偏移约束加IBOutlet；同理处理Text2的偏移约束）。示例代码：

@IBOutlet weak var text1CenterXOffset: NSLayoutConstraint!
@IBOutlet weak var text2CenterXOffset: NSLayoutConstraint!
@IBOutlet weak var text1: UILabel!
@IBOutlet weak var text2: UILabel!

2. 在正确时机执行动画：把动画代码放到viewDidAppear方法中，这个方法执行时视图已经完成初始布局，起始状态是准确的。修改约束的constant值（让两个标签最终停靠在视图中心），再在动画闭包里调用layoutIfNeeded()：

override func viewDidAppear(_ animated: Bool) {
    super.viewDidAppear(animated)
    
    // 修改约束的constant，让两个标签最终对齐到视图中心
    text1CenterXOffset.constant = 0
    text2CenterXOffset.constant = 0
    
    // 执行动画，让系统根据修改后的约束重新布局
    UIView.animate(withDuration: 5, delay: 0, options: [.beginFromCurrentState], animations: {
        self.view.layoutIfNeeded()
    }, completion: nil)
}

补充说明： #

• 如果你原本的约束不是基于centerX偏移（比如Text1用的是leading到父视图的约束），可以计算出目标constant值：比如父视图宽度300，Text1宽度50，要让它对齐中心，leading约束的constant应设为(300 - 50)/2 = 125，动画时修改到这个值即可。
• 记住：在AutoLayout环境下，永远不要直接修改frame来调整布局，所有布局变化都要通过修改约束实现，这样动画才能和AutoLayout协同工作。

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