Question

我尝试了使用Snapkit制作轻量级动画的不同教程，但似乎没有任何帮助。我甚至尝试过Spring框架，但这并没有起作用。这是我的代码。

private func setupMatchView() {
    view.addSubview(matchOverlayView)
    matchOverlayView.snp.makeConstraints { (make) in
        make.top.equalTo(view.safeAreaLayoutGuide.snp.topMargin)
        make.bottom.equalTo(view.safeAreaLayoutGuide.snp.bottomMargin)
        make.left.equalToSuperview()
        make.right.equalToSuperview()
    }
    matchOverlayView.backgroundColor = UIColor.white.withAlphaComponent(0.5)

    view.addSubview(matchView)
    matchView.snp.makeConstraints { (make) in
        make.left.equalToSuperview().offset(32)
        make.right.equalToSuperview().inset(32)
        make.centerX.equalToSuperview()
        make.centerY.equalToSuperview()
    }
    matchView.backgroundColor = .white
    matchView.layer.cornerRadius = 8
    matchView.dropShadow()

    matchView.addSubview(matchYourImageView)
    matchYourImageView.snp.makeConstraints { (make) in
        make.height.width.equalTo(100)
        make.centerX.equalToSuperview().inset(20)
        make.top.equalToSuperview().offset(40)
    }
    matchYourImageView.backgroundColor = UIColor(red:0.77, green:0.77, blue:0.77, alpha:1.00)
    matchYourImageView.layer.cornerRadius = 50
    matchYourImageView.clipsToBounds = true

    matchView.addSubview(matchHerImageView)
    matchHerImageView.snp.makeConstraints { (make) in
        make.height.width.equalTo(100)
        make.centerX.equalToSuperview().inset(-20)
        make.top.equalTo(matchYourImageView.snp.top)
    }
    matchHerImageView.backgroundColor = UIColor(red:0.69, green:0.69, blue:0.69, alpha:1.00)
    matchHerImageView.layer.cornerRadius = 50
    matchHerImageView.clipsToBounds = true

    matchView.addSubview(matchLabel)
    matchLabel.snp.makeConstraints { (make) in
        make.top.equalTo(matchYourImageView.snp.bottom).offset(64)
        make.centerX.equalToSuperview()
    }
    matchLabel.text = "Match"
    matchLabel.font = UIFont.systemFont(ofSize: 28, weight: .heavy)

    matchView.addSubview(matchCTA)
    matchCTA.snp.makeConstraints { (make) in
        make.top.equalTo(matchLabel.snp.bottom).offset(40)
        make.left.equalToSuperview().offset(32)
        make.right.equalToSuperview().inset(32)
        make.height.equalTo(44)
        make.bottom.equalToSuperview().inset(40)
    }
    matchCTA.setTitle("Go To Chat", for: .normal)


    matchView.addSubview(matchCloseButton)
    matchCloseButton.snp.makeConstraints { (make) in
        make.width.equalTo(32)
        make.height.equalTo(32)
        make.right.equalToSuperview().inset(16)
        make.top.equalToSuperview().inset(16)
    }
    matchCloseButton.setImage(UIImage(named: "Close"), for: .normal)
    matchCloseButton.addTarget(self, action: #selector(self.closeButtonTapped(_:)), for:.touchUpInside)

    matchView.layoutIfNeeded()

    hideMatch()
}

@objc func closeButtonTapped(_ sender:UIButton) {
    hideMatch()
}

private func hideMatch() {
    self.matchOverlayView.alpha = 0
    self.matchView.snp.updateConstraints { (make) in
        make.centerY.equalToSuperview().offset(self.view.frame.height)
    }
    UIView.animate(withDuration: 1) {
        self.matchView.layoutIfNeeded()
    }
}
private func showMatch() {
    self.matchOverlayView.alpha = 1
    self.matchView.snp.updateConstraints { (make) in
        make.centerY.equalToSuperview().offset(0)
    }
    UIView.animate(withDuration: 2) {
        self.matchView.layoutIfNeeded()
    }
}

这不起作用。当用户触发showMatch()方法时，该视图只显示，没有动画。如果有人可以提供帮助那就会膨胀。

Answer 1

您必须在layoutIfNeeded的超级评论中致电matchView：

private func showMatch() {
    self.matchOverlayView.alpha = 1
    self.matchView.snp.updateConstraints { (make) in
        make.centerY.equalToSuperview().offset(0)
    }
    UIView.animate(withDuration: 2) {
        self.view.layoutIfNeeded()
    }
}

当您在layoutIfNeeded上致电UIView时，布局引擎会将该视图用作根视图，并开始布置所有该视图的子视图。但只有子视图！

当您在layoutIfNeeded上致电matchView时，布局更改未动画化的原因。您必须在layoutIfNeeded的一个超视图上致电matchView以触发布局更改。

Answer 2

现有的唯一答案对我不起作用。
这是对我有用的东西。

let anim = UIViewPropertyAnimator(duration: 0.2, curve: UIView.AnimationCurve.linear, animations: { [weak self] in
    self?.matchView.snp.remakeConstraints { (make) in
        make.centerY.equalToSuperview().offset(0)
    }
    self?.view.layoutIfNeeded()
})

anim.startAnimation()

使用Snapkit查看动画

2 个答案: