Swift 动画时序和自动布局约束导致过渡不协调

Question

目标：应用基于约束的动画，以便 UILabel 改变高度同时保持其顶部锚点约束。

问题：约束和视图适当更新，但似乎存在时间差异 - 高度约束首先更改（好像从零高度开始），而不是保持固定到顶部锚约束。

感谢任何反馈或指导。

.

class ViewController: UIViewController {

    private var button : UIButton = {
       let button = UIButton()
        button.backgroundColor = .red
        button.setTitle("Hello", for: .normal)
        button.setTitleColor(.white, for: .normal)
        button.titleLabel?.textAlignment = .center
        button.titleLabel?.font = .systemFont(ofSize: 24, weight: .bold)
        button.setTitleColor(.white, for: .normal)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addTarget(self, action: #selector(changeConstraints), for: .touchUpInside)
        return button
    }()
    
    private var label : UILabel = {
       let label = UILabel()
        label.backgroundColor = .blue
        label.text = "This is my label"
        label.font = .systemFont(ofSize: 34, weight: .semibold)
        label.textAlignment = .center
        label.textColor = .white
        label.translatesAutoresizingMaskIntoConstraints = false
        return label
    }()
    
    private var animationCount = 0
    
    private var labelHeightConstraint : NSLayoutConstraint = NSLayoutConstraint()
    
    
    override func viewDidLoad() {
        super.viewDidLoad()

        setupUI()

    }

    func setupUI() {
        
        view.addSubview(button)
        view.addSubview(label)

        // setting initial label height constraint
        labelHeightConstraint =  label.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.6)
        labelHeightConstraint.isActive = true
        
       
        
        NSLayoutConstraint.activate([
        
        
            label.topAnchor.constraint(equalTo: view.topAnchor, constant: 10),
            label.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            label.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),

            button.topAnchor.constraint(equalTo: label.bottomAnchor, constant: 20),
            button.bottomAnchor.constraint(equalTo: view.bottomAnchor, constant: -20),
            button.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            button.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
        

        ])
        
    }

    
    @objc func changeConstraints() {
        
        print("changeConstraints method CALLED")
        
        //count for animation state
        animationCount += 1
        
        UIView.animate(withDuration: 2.0) { [unowned self] in
            if animationCount % 2 == 0 {
                labelHeightConstraint.isActive = false
                labelHeightConstraint = label.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.6)
                button.setTitle("GoodBye", for: .normal)
                button.backgroundColor = .purple
                button.setTitleColor(.white, for: .normal)
            } else {
                labelHeightConstraint.isActive = false
                labelHeightConstraint = label.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.2)
                button.setTitle("Welcome Back", for: .normal)
                button.backgroundColor = .green
                button.setTitleColor(.black, for: .normal)
            }
            
            labelHeightConstraint.isActive = true
            self.view.layoutIfNeeded()
        }

        
    }
}

Answer 1

你为什么不试试这段代码：

@objc func changeConstraints() {
    print("changeConstraints method CALLED")
    
    //count for animation state
    animationCount += 1
    if animationCount % 2 == 0 {
        labelHeightConstraint = label.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.6)
        button.setTitle("GoodBye", for: .normal)
        button.setTitleColor(.white, for: .normal)
    } else {
        labelHeightConstraint = label.heightAnchor.constraint(equalTo: view.heightAnchor, multiplier: 0.2)
        button.setTitle("Welcome Back", for: .normal)
        button.setTitleColor(.black, for: .normal)
    }

    UIView.animate(withDuration: 2.0) {
        self.view.layoutIfNeeded()
        self.button.backgroundColor = self.animationCount % 2 == 0 ? .purple : .green
    }   
}

不需要激活和取消激活约束。也不需要分配新的约束，直接修改乘数即可。

在动画块内进行约束更改也不是必需的，如果您将 layoutIfNeeded 放在块内，它将动画。 Button title 和 titleColor 是不可动画的，所以我将它们从块中删除。