How to animate the view to the center of X and Y?

Question

I have an ImageView that have centerX and centerY constraint to the Helper Header View like the image below

I want to animate that logo imageView to be located at the center of the screen like image below:

I have tried some code, but it doesn't work, to be honest I am not sure with this code below, here is what I try. maybe you have better approach. here is what I tried

first I try to give identifier to both constraint :

and then I remove the constraint and make a new one like the code below:

 UIView.animate(withDuration: 1.1, delay: 0.5, usingSpringWithDamping:  0.4, initialSpringVelocity: 0.0, animations: {

            // remove the initial constraint
            self.mainLogoCenterXConstraint.isActive = false
            self.mainLogoCenterYConstraint.isActive = false

            // create new constraint
            let newMainLogoCenterXConstraint = NSLayoutConstraint(
                item: self.mainLogoImageView,
                attribute: .centerX,
                relatedBy: .equal,
                toItem: self.view,
                attribute: .centerY,
                multiplier: 1.0,
                constant: 0)
            newMainLogoCenterXConstraint.identifier = "mainLogoCenterXConstraint"
            newMainLogoCenterXConstraint.isActive = true

            let newMainLogoCenterYConstraint = NSLayoutConstraint(
                item: self.mainLogoImageView,
                attribute: .centerY,
                relatedBy: .equal,
                toItem: self.view,
                attribute: .centerY,
                multiplier: 1.0,
                constant: 0)
            newMainLogoCenterYConstraint.identifier = "mainLogoCenterYConstraint"
            newMainLogoCenterYConstraint.isActive = true


            self.view.layoutIfNeeded()

        }, completion: nil)

but it crash and give error:

'NSInvalidLayoutConstraintException', reason: 'Constraint improperly relates anchors of incompatible types:

maybe you have better way to achieve this....

**DO NOT** change constraints just for animation! Animate using [.transform property](https://developer.apple.com/documentation/uikit/uiview/1622459-transform): first set offset, than animate to `.identity`. — user28434'mstep, Jan 09 '19 at 11:14

score 2 · Accepted Answer · answered Jan 09 '19 at 09:40

You have an error in creating the first constraint relating self.mainLogoImageView.centerX to self.view.centerY - change the second one to self.view.centerX. You cannot bind x-axis anchor to y-axis anchor.

Moreover, make sure you animate it properly, check my answer on how to do that with autolayout here.

In your case:

// remove the initial constraint
self.mainLogoCenterXConstraint.isActive = false
self.mainLogoCenterYConstraint.isActive = false

// create new constraint
let newMainLogoCenterXConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerX,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerX,
            multiplier: 1.0,
            constant: 0)
newMainLogoCenterXConstraint.identifier = "mainLogoCenterXConstraint"
newMainLogoCenterXConstraint.isActive = true

let newMainLogoCenterYConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerY,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerY,
            multiplier: 1.0,
            constant: 0)
newMainLogoCenterYConstraint.identifier = "mainLogoCenterYConstraint"
newMainLogoCenterYConstraint.isActive = true

self.view.setNeedsLayout()

UIView.animate(withDuration: 1.1, delay: 0.5, usingSpringWithDamping:  0.4, initialSpringVelocity: 0.0, animations: {

    self.view.layoutIfNeeded()

}, completion: nil)

score 1 · Answer 2 · answered Jan 09 '19 at 09:41

The problem is here

     // create new constraint
        let newMainLogoCenterXConstraint = NSLayoutConstraint(
            item: self.mainLogoImageView,
            attribute: .centerX,
            relatedBy: .equal,
            toItem: self.view,
            attribute: .centerY,
            multiplier: 1.0,
            constant: 0)

you give center X,y which are in Compatible types , but both should be centerX

Also this isn't sufficient to show the image at center of view , as it's a subview of helperView , so you need to set

 self.helperView.clipsToBounds = false // if it's true

How to animate the view to the center of X and Y?

2 Answers2