ios - 如何正确地为垂直堆栈 View 中的项目高度设置动画？

Question

我有一个红色的堆栈 View 。
它包含一个标签和一个紫色的自定义 View 。
它看起来如下

我想实现的是

标签的左上角 (x, y) 在动画期间将始终保持不变。

紫色自定义 View 的左上角 (x, y) 在动画期间将始终保持不变。

在动画期间，红色堆栈 View 将根据紫色自定义 View 的动画优雅地进行动画处理。

我使用以下代码

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()
        }
    }
}

这就是我所取得的成就。

我们可以观察

红色堆栈 View 的高度会突然改变，不会跟随其子紫色 View 的动画。

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

标签的左上角 (x, y) 在动画期间将始终保持不变。

紫色自定义 View 的左上角 (x, y) 在动画期间将始终保持不变。

在动画期间，红色堆栈 View 将根据紫色自定义 View 的动画优雅地进行动画处理。

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

Answer 1

像这样设置你的按钮 Action

@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()
        }
    }