View animations with Snapkit

Question

I tried different tutorials for making light animations with Snapkit but nothing seems to help. I even tried Spring framework, but that didn't work as well. Here is my code.

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

And that doesn't work. When user triggers showMatch() method, that view just shows, there is no animation. If anyone can help that would be swell.

joern · Answer 1 · 2018-05-17T09:10:48.343

You have to call layoutIfNeeded on matchView's superview:

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

When you call layoutIfNeeded on a UIView the layout engine uses that view as root view and starts to layout all of that view's subviews. But only the subviews!

That's why the layout change is not animated when you call layoutIfNeeded on matchView. You have to call layoutIfNeeded on one of matchView's superviews to trigger the layout change.

score 3 · Answer 2 · answered Sep 19 '20 at 04:21

The only existing answer didn't work for me.
Here's what worked for me.

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()

View animations with Snapkit

2 Answers2