Button animation doesn't work properly in swift

Question

I'm making an app in swift using Xcode and I'm having troubles with the animation of some button. Here's my situation:

I have three buttons in the middle of the screen where i've also added some constraints.

What i need is that when the button is clicked it reaches the top of the screen, like in this second photo with an animation:

I've tried this:

UIView.animateWithDuration(1, delay: 0, options: [], animations: {
        self.Button2.center.y = 18 + self.Button2.frame.height/2

        }, completion: nil)

But what happens is that the button appears from the bottom of the screen slides up to the position of the first photo. It doesn't respect the position I wrote in the animation. Is it possibile that this is due to the constraints? Because I centered it vertically and horizontally.

Can you help me to make it work?

what you can try is create two points. 1 where your buttons is currently positioned and second where it should go. then simply assign the second frame to your button's frame. — Umair Afzal, Jun 27 '16 at 07:48

Alessandro Ornano · Answer 1 · 2016-06-27T09:25:06.040

1

When you work with autolayout and constraints you never make changes to the button frame in your animation, like your code: you must work always with constraints.

This is a generic example:

myButtonCenterYConstraint.constant = 200.0
myButton.layoutIfNeeded()
UIView.animateWithDuration(Double(0.5), animations: {
        myButtonCenterYConstraint.constant = 0
        myButton.layoutIfNeeded()
})

So, the first step is to declare the button constraints you will want to change as IBOutlets:

edited Jun 27 '16 at 09:25

answered Jun 27 '16 at 07:53

Alessandro Ornano

34,887
11
106
133

Well actually before using the animation i did it using NSTimer which called a function that moved the button, and it worked, so probably it's not a matter of constraints – Alessandro Giovagnoli Jun 27 '16 at 08:13
Constraints "force" the position of your buttons. If you change the button positions without change constraints, autolayout could recalculate all elements positions of your view by maintaining the constraints priorities: you can find yourself in front of unpleasant and unexpected results. – Alessandro Ornano Jun 27 '16 at 08:32
But is there a way to set two points of the screen and say "you have to move from here to there"? Because I've also checked online and it seems that with this animation you can only move your button from one side of the screen to a point that you can chose – Alessandro Giovagnoli Jun 27 '16 at 09:09
No. When you use autolayout, you give references between your object , all elements in your view and your view. You cannot ignore it. So, every element have his constraints and each constraints can have a different priority from others. With some math calculation you can do all you needed. Pay attention: you can also try to change only frame, or center, maybe apparently you maybe fine, but you will receive warnings for wrong constraints values and your app may have malfunctions. – Alessandro Ornano Jun 27 '16 at 09:22

score 0 · Answer 2 · answered Jun 27 '16 at 07:53

First get the center y of the button then reposition the button.

float centerY = self.Button2.center.y;    

UIView.animateWithDuration(1, delay: 0, options: [], animations: {
    self.Button2.center.y = centerY + 18 + self.Button2.frame.height/2

    }, completion: nil)

score 0 · Answer 3 · edited May 23 '17 at 12:24

You must change the constraint first and then update the UI in animation. Something like this.

yourButton.yourOriginConstraint'sYCoordinate.constant = // Set this to what you want to change.

// yes, you should create an IBOutlet for constraint that you want to modify.

UIView.animateWithDuration(1.0, animations: {
            self.view.layoutIfNeeded()
            }, completion: nil)

Another way is to not user auto layout.

Here, is the reference

Button animation doesn't work properly in swift

3 Answers3