0

I've got two two text fields displayNameTF and emailTF.

I'm wanting to animate one text field to go over the top of the other one.

displayNameTF.center = emailTFOrigin

UIView.animate(withDuration: 0.3) {
                self.view.layoutIfNeeded()
            }

I've stored the center of the emailTF in the emailTFOrigin and I'm setting the center of the displayNameTF to it and animating layoutIfNeeded.

The animation I get with this is the text fields by default are about 5 points away from eachother , the displaynameTF hops directly ontop of the emailTF, and animates back up to its original position.

The animation I'm looking to have happen is the displayNameTF animates down ontop of the email. Right now it's animating back up to its original position from the emailTF.

How can I accomplish having the top TF animate down ontop of the bottom TF if there are constraints in play?

enter image description here

Barkley
  • 6,063
  • 3
  • 18
  • 25

2 Answers2

1

In your code you are trying to set a custom center to the text field. That is wrong. Your text field is going back to the initial position because of that. Instead of doing that you should animate the constraint that places the text field in its current position.

One option is you can create 2 constraints and keep only one of them active at a time. 1 = current position and 2 = new position. Deactivate 1st one and activate the 2nd one. Call the animation. The text field will move to the 2nd position.

ArunGJ
  • 2,685
  • 21
  • 27
1

Create constraint which connects the top of the bottom TF to the downside of the top TF. Create an outlet of that constraint. To animate it, change the constant of that constraint the height of the TF and call layoutIfNeeded()

J. Doe
  • 12,159
  • 9
  • 60
  • 114