使用AutoLayout为视图制作动画，但在没有实际动画的情况下进行更改

Question

我有一个自定义视图子类，为了清楚起见，我将提供所有代码。我已经强调了下面的相关部分。

注意：我知道如何使用AutoLayout为视图设置动画。问题不在于编写动画代码。问题是它更新视图但实际上并没有动画。它只是跳到新的大小。

class ExpandingButtonView: UIView {
    let titleLabel: UILabel = {
        let l = UILabel()
        l.translatesAutoresizingMaskIntoConstraints = false
        l.textColor = .white
        l.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .vertical)
        l.setContentHuggingPriority(UILayoutPriorityRequired, for: .vertical)
        return l
    }()

    let buttonStack: UIStackView = {
        let s = UIStackView()
        s.translatesAutoresizingMaskIntoConstraints = false
        s.axis = .vertical
        s.spacing = 8
        s.isLayoutMarginsRelativeArrangement = true
        s.layoutMargins = UIEdgeInsets(top: 10, left: 10, bottom: 10, right: 10)
        return s
    }()

    var collapsed: Bool = true {
        didSet {
            animatedCollapsedState()
        }
    }

    lazy var collapsedConstraint: NSLayoutConstraint = {
        return self.bottomAnchor.constraint(equalTo: self.titleLabel.bottomAnchor, constant: 10)
    }()

    lazy var expandedConstraint: NSLayoutConstraint = {
        return self.bottomAnchor.constraint(equalTo: self.buttonStack.bottomAnchor)
    }()

    init(title: String, color: UIColor, buttonTitles: [String]) {
        super.init(frame: .zero)

        translatesAutoresizingMaskIntoConstraints = false
        layer.cornerRadius = 8
        clipsToBounds = true
        backgroundColor = color

        let tapGestureRecognizer = UITapGestureRecognizer(target: self, action: #selector(toggleCollapsed))
        tapGestureRecognizer.numberOfTapsRequired = 1
        tapGestureRecognizer.numberOfTouchesRequired = 1
        addGestureRecognizer(tapGestureRecognizer)

        titleLabel.text = title
        addSubview(titleLabel)
        addSubview(buttonStack)

        buttonTitles.forEach {
            let button = UIButton(type: .system)
            button.translatesAutoresizingMaskIntoConstraints = false
            button.backgroundColor = UIColor(white: 1.0, alpha: 0.5)
            button.setTitle($0, for: .normal)
            button.tintColor = .white
            button.layer.cornerRadius = 4
            button.clipsToBounds = true
            button.titleLabel?.font = .boldSystemFont(ofSize: 17)
            button.setContentCompressionResistancePriority(UILayoutPriorityRequired, for: .vertical)

            buttonStack.addArrangedSubview(button)
        }

        NSLayoutConstraint.activate([
            collapsedConstraint,
            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 10),
            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 10),
            titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: 10),
            titleLabel.bottomAnchor.constraint(equalTo: buttonStack.topAnchor),
            buttonStack.leadingAnchor.constraint(equalTo: leadingAnchor),
            buttonStack.trailingAnchor.constraint(equalTo: trailingAnchor),
            ])
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }

    func toggleCollapsed() {
        collapsed = !collapsed
    }

    func animatedCollapsedState() {
        UIView.animate(withDuration: 1) {
            self.collapsedConstraint.isActive = self.collapsed
            self.expandedConstraint.isActive = !self.collapsed
            self.layoutIfNeeded()
        }
    }
}

它有两个州......

1. 折叠...



1. 扩展...



当您点按它时，tapGestureRecognizer会切换触发collapsed的{​​{1}}值，然后动画显示用户界面。

动画功能是......

didSet

然而......它不是动画。它只是在没有实际动画的情况下跳到新的大小。

我已删除该问题的另一部分视图。在UI更改期间还有一个淡入/淡出的背景图像视图。 DOES 动画。所以我不太确定这里发生了什么？

我还尝试将约束更新移出动画块，并在更新之前尝试运行func animatedCollapsedState() { UIView.animate(withDuration: 1) { self.collapsedConstraint.isActive = self.collapsed self.expandedConstraint.isActive = !self.collapsed self.layoutIfNeeded() } } 。

在所有情况下，它都会跳到新的尺寸。

Answer 1

您必须在视图的超级视图上调用layoutIfNeeded()。

func animatedCollapsedState() {
    self.collapsedConstraint.isActive = self.collapsed
    self.expandedConstraint.isActive = !self.collapsed
    UIView.animate(withDuration: 1) {
        self.superview?.layoutIfNeeded()
    }
}