ios - 具有自动布局和 subview 的 UIView 动画

Question

我有一个奇怪的问题，似乎很容易解决。我想我可以使用一些解决方法来实现我想要的行为，但我想知道是否有更好的方法。

我有一个名为 contentView 的 View (图中蓝色)，它将使用 UIView.animation 扩展其高度，这完全没有问题并且按预期工作。

这里的问题是这个 View 有一个子组件(一个按钮)，它的底部有一个自动布局约束等于 22，如下所示:

这是自动布局约束:

如果我在没有动画的情况下调整高度大小，效果很好， View 高度变化和按钮始终是 contentView 底部的 22 点。但是，当我使用动画使此更改更加流畅和用户友好时，按钮甚至在动画开始之前就移动到结束位置。

我想知道如何在此处实现流畅的动画，但按钮沿其父 View 移动

处理动画的代码部分非常简单，但我会把它贴在这里:

@IBAction func openDetail(_ sender: ExpandCourseDetail) {
        let rotation = sender.getOpen() ? CGAffineTransform.identity : CGAffineTransform(rotationAngle: CGFloat.pi)
        UIView.animate(withDuration: 0.5, delay: 0.1, options: [.curveEaseInOut], animations: {
            sender.transform = rotation
        }, completion: {
            success in
            sender.setOpen(!sender.getOpen())
        })
        UIView.animate(withDuration: 1.0, delay: 0.5, options: [.curveEaseInOut], animations: {
            self.contentView.frame.size.height = sender.getOpen() ? self.contentView.frame.height - 300 : self.contentView.frame.height + 300
        }, completion: nil)
    }

附带说明一下，按钮本身有一个动画，可以将按钮旋转 180 度以向用户显示 View 正在展开。

非常感谢您的帮助。

Answer 1

使用约束非常简单，只需创建一个 superView 高度约束 IBOutlet 并更改其常量值即可。

@IBAction func btnPressed(_ sender: UIButton) {
    self.toggleButton.isSelected = !sender.isSelected

    //Animation starts here
    self.view.layoutIfNeeded()
    UIView.animate(withDuration: 0.7) {

        if self.toggleButton.isSelected {
            //transform button
            self.toggleButton.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi))

            //change your ParentView height to desired one
            self.constContentViewHeight.constant = self.view.frame.size.height - 220
            self.view.layoutIfNeeded()
        } else {

            self.toggleButton.transform = CGAffineTransform(rotationAngle: CGFloat(Double.pi*2))
            // Set height constraint to original value
            self.constContentViewHeight.constant = 250
            self.view.layoutIfNeeded()
        }
    }

}

我已经创建了一个演示，请查看。