Question

正如您在下面的代码中看到的那样，我正在尝试使用约束制作折叠/展开动画。当然，灰色背景具有折叠/展开动画，但是图像本身没有。

如何获得与图像本身相同的折叠/展开效果？

class ViewController2: UIViewController {
    var folded: Bool = false
    var imagen: UIImageView!
    private var foldConstraint: NSLayoutConstraint!
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        let imagen = UIImageView(contentMode: .scaleAspectFill, image: #imageLiteral(resourceName: "gpointbutton"))
        imagen.translatesAutoresizingMaskIntoConstraints = false
        imagen.backgroundColor = .gray
        view.addSubview(imagen)
        self.imagen = imagen
        imagen.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        imagen.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        foldConstraint = imagen.heightAnchor.constraint(equalToConstant: 0)
        createAnimationButton()
    }
    private func createAnimationButton() {
        let button = UIButton(title: "Animate", titleColor: .blue)
        button.translatesAutoresizingMaskIntoConstraints = false
        button.addAction(for: .touchUpInside) { [weak self] (_) in
            guard let self = self else { return }
            self.folded = !self.folded
            if self.folded {
                self.foldConstraint.isActive = true
                UIView.animate(withDuration: 0.5) {
                    self.imagen.setNeedsLayout()
                    self.imagen.superview?.layoutIfNeeded()
                }
            } else {
                self.foldConstraint.isActive = false
                UIView.animate(withDuration: 0.5) {
                    self.imagen.setNeedsLayout()
                    self.imagen.superview?.layoutIfNeeded()
                }
            }
        }
        view.addSubview(button)
        button.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
        button.bottomAnchor.constraint(equalTo: view.safeAreaLayoutGuide.bottomAnchor).isActive = true
    }
}

Answer 1

这里要注意的一件事是，width或height约束被设置为0（准确地还包括0.1），并且被隐藏了。

然后，您需要将height约束设置为大于0.1

foldConstraint = imagen.heightAnchor.constraint(equalToConstant: 0)

替换为此，暂时设置为1

foldConstraint = imagen.heightAnchor.constraint(equalToConstant: 1)

在动画末尾隐藏它

        self.folded = !self.folded
        if self.folded {
            self.foldConstraint.isActive = true
            UIView.animate(withDuration: 1, animations: {
                self.imagen.setNeedsLayout()
                self.imagen.superview?.layoutIfNeeded()
            }) { (completion) in
                self.imagen.isHidden = true
            }
        } else {
            self.imagen.isHidden = false
            self.foldConstraint.isActive = false
            UIView.animate(withDuration: 1, animations: {
                 self.imagen.setNeedsLayout()
                 self.imagen.superview?.layoutIfNeeded()
             })
        }

更新：

scaleAspectFill不适合动画，应将其设置为scaleAspectFit

let imagen = UIImageView(contentMode: .scaleAspectFit, image: #imageLiteral(resourceName: "gpointbutton"))

使用约束折叠和展开UIImageView动画

1 个答案:

更新：