How animate properly height constraint

Question

Inside my app I'm animating the height constraint of a view and when the height constraint changes the view does translate for a while a little bit down despite I set the constraint to the top as 0. Here's the code I used to animate the change:

UIView.animate(withDuration: 0.5) {
    if finalHeight >= mediumY {
        self.heightConstraintConstant = self.maxHeight
    } else {
        self.heightConstraintConstant = self.minHeight
    }
}

And here's the one for creating all the expandable view:

    //
//  ExpandibleView.swift
//  PhotoMapping
//
//  Created by Lorenzo Santini on 04/09/18.
//  Copyright © 2018 Lorenzo Santini. All rights reserved.
//

import Foundation
import UIKit

class ExpandableView: UIView {
    let panGestureRecognizer = UIPanGestureRecognizer()

    var minHeight: CGFloat = 0 {
        didSet {
            initialHeight = minHeight
        }
    }
    var maxHeight: CGFloat = 0

    var initialHeight: CGFloat = 0
    var initialPoint: CGPoint? = nil

    var heightConstraintConstant: CGFloat {
        get {
            if !self.constraints.filter({ $0.firstAttribute == .height}).isEmpty {
                return self.constraints.filter({$0.firstAttribute == .height && $0.secondItem == nil}).first!.constant
            } else {
                let constrain = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: initialHeight)
                constrain.priority = .defaultHigh
                self.addConstraint(constrain)
                return constrain.constant
            }
        }

        set(newConstant){
            if !self.constraints.filter({ $0.firstAttribute == .height}).isEmpty {
                self.constraints.filter({$0.firstAttribute == .height && $0.secondItem == nil}).first?.constant = newConstant
            } else {
                let constrain = NSLayoutConstraint(item: self, attribute: .height, relatedBy: .equal, toItem: nil, attribute: .height, multiplier: 1.0, constant: newConstant)
                self.addConstraint(constrain)
            }
            //self.layoutIfNeeded()
        }

    }

    func initialize(minHeight: CGFloat, maxHeight: CGFloat) {
        //Create panGestureRecognizer
        panGestureRecognizer.addTarget(self, action: #selector(handlePan(_:)))
        panGestureRecognizer.minimumNumberOfTouches = 1
        panGestureRecognizer.maximumNumberOfTouches = 1
        self.addGestureRecognizer(panGestureRecognizer)

        //Set min and max height
        self.minHeight = minHeight
        self.maxHeight = maxHeight

        self.translatesAutoresizingMaskIntoConstraints = false

        self.subviews.map{$0.translatesAutoresizingMaskIntoConstraints = false}
    }

    @objc func handlePan(_ sender: Any) {
        let translation = panGestureRecognizer.translation(in: self)

        if initialPoint == nil {
            initialPoint = translation
        }

        let translationHeight = CGFloat(translation.y - initialPoint!.y)
        let finalHeight = translationHeight + initialHeight

        if panGestureRecognizer.state == .changed {
            if finalHeight <= maxHeight && finalHeight >= minHeight {
                heightConstraintConstant = finalHeight
            } else if finalHeight >= maxHeight {
                heightConstraintConstant = maxHeight
            } else if finalHeight <= minHeight {
                heightConstraintConstant = minHeight
            }
        } else if panGestureRecognizer.state == .ended {

            let mediumY = maxHeight / 2 + minHeight / 2

            if finalHeight >= mediumY {
                self.heightConstraintConstant = self.maxHeight
            } else {
                self.heightConstraintConstant = self.minHeight
            }
            UIView.animate(withDuration: 0.5) {
                self.layoutIfNeeded()
            }

            initialPoint = nil
            initialHeight = heightConstraintConstant
        }

        //layoutIfNeeded()
    }

}

The problem for me isn't how animate the height change because that works but instead is solve the fact that for a while the app seems to ignore the constraint to the top. Here's the gif showing the animation

Answer 1

I believe what you need to do is actually animate the layout being updated. More specifically something like this

if finalHeight >= mediumY {
    self.heightConstraintConstant = self.maxHeight
} else {
    self.heightConstraintConstant = self.minHeight
}
UIView.animate(withDuration: 0.5) {
    viewThatTheConstraintBelongsTo.layoutIfNeeded()
}