How animate properly height constraint

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

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



viewThatTheConstraintBelongsTo

superview

Thanks for contributing an answer to Stack Overflow!

But avoid …

To learn more, see our tips on writing great answers.

Required, but never shown

Required, but never shown

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.