如何利用UIView动画实现SnapKit约束下视图从右向左的宽度变化？

我来帮你搞定这个动画跳动的问题，实现从右向左的平滑展开效果～

首先得指出你代码里的一个小笔误：你写的展开和收起动画的updateConstraints代码都是设置width为150，这肯定不对，收起时应该还原到初始的宽度值，不然动画根本不会有变化。

问题根源分析 #

你遇到的“先向左跳动再展开”的问题，主要有两个原因：

1. 动画触发时没有正确让父视图执行布局更新，导致约束变化没有被平滑动画化
2. 初始宽度和目标宽度的切换过程中，系统可能因为约束计算的顺序问题，出现瞬间布局跳转

解决方案步骤 #

1. 保存初始宽度值

先把初始的宽度值存起来，避免重复计算intrinsicContentSize，也能保证收起动画的一致性：

private var initialSliderWidth: CGFloat = 0.0

在设置初始约束的时候，把这个值记录下来：

// 计算初始宽度
let initialWidth = slider.labels.first?.intrinsicContentSize.width ?? 30.0
initialSliderWidth = initialWidth

// 设置初始约束
slider.snp.makeConstraints { make in
    make.trailing.equalToSuperview() // 固定右侧锚点，这是实现从右向左展开的关键
    make.centerY.equalToSuperview()
    make.height.equalTo(slider.getContentHeight())
    make.width.equalTo(initialWidth)
}

2. 正确编写展开/收起动画代码

核心要点：更新约束的代码要放在动画块外面，动画块里只需要触发父视图的布局更新（因为你的slider是放在self.view里的，所以调用self.view.layoutIfNeeded()）。

展开动画：

// 先更新宽度约束到目标值
slider.snp.updateConstraints { make in
    make.width.equalTo(150.0)
}

// 执行平滑动画
UIView.animate(withDuration: 0.5, animations: {
    self.view.layoutIfNeeded() // 让父视图重新布局，带动slider的约束变化动画
}, completion: nil)

收起动画：

// 还原宽度到初始值
slider.snp.updateConstraints { make in
    make.width.equalTo(initialSliderWidth)
}

UIView.animate(withDuration: 0.5, animations: {
    self.view.layoutIfNeeded()
}, completion: nil)

为什么这样能解决问题？ #

因为你固定了slider的trailing锚点，当width从初始值变大到150时，slider的leading会自动向左移动，这样视觉上就是从右向左展开的效果。而调用父视图的layoutIfNeeded()，能确保所有约束变化都被纳入动画流程，避免了瞬间跳转的问题。

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