如何正确设置垂直堆栈视图中项目高度的动画？

Question

我有红色堆栈视图。

它包含一个标签和一个紫色自定义视图。

看起来如下

我想实现的是

1. 动画期间，标签的左上角 (x, y) 将始终保持不变。
2. 紫色自定义视图的左上角 (x, y) 在动画过程中将始终保持不变。
3. 在动画过程中，红色堆栈视图将基于紫色自定义视图的动画优雅地进行动画处理。

我使用下面的代码

class ViewController: UIViewController {

    @IBOutlet weak var purpleView: UIView!
    @IBOutlet weak var stackView: UIStackView!
    @IBOutlet weak var purpleViewHeightConstraint: NSLayoutConstraint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    var value: CGFloat = 200.0
    @IBAction func buttonClicked(_ sender: Any) {
        if value == 500 {
            value = 200.0
        } else {
            value = 500.0
        }
        
        UIView.animate(withDuration: 2) {
            self.purpleViewHeightConstraint.constant = self.value
            self.purpleView.setNeedsLayout()
            self.purpleView.layoutIfNeeded()
        }
    }
}

这就是我所取得的成就。

我们可以观察

1. 红色堆栈视图的高度将突然改变，而不跟随其子紫色视图的动画。

不删除UIStackView，我怎样才能实现？

1. 动画期间，标签的左上角 (x, y) 将始终保持不变。
2. 紫色自定义视图的左上角 (x, y) 在动画过程中将始终保持不变。
3. 在动画过程中，红色堆栈视图将基于紫色自定义视图的动画优雅地进行动画处理。

我发布了演示项目 - https://github.com/yccheok/animate-stack-view-item

谢谢。

Answer 1

像这样设置你的按钮动作

@IBAction func buttonClicked(_ sender: Any) {
        if value == 500 {
            value = 200.0
        } else {
            value = 500.0
        }
        self.purpleViewHeightConstraint.constant = self.value
        UIView.animate(withDuration: 2) {
            self.view.layoutIfNeeded()
        }
    }