时间戳

首页 > 解决方案 > 使用约束的 UIImageView 的折叠和展开动画

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

问题描述

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

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

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

标签： iosswiftnslayoutconstraint

解决方案

这里要注意的一件事是widthorheight约束设置为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"))

推荐阅读