How do I animate a button to shrink and move to a different location?

Question

I am dumbfounded by this one.

I have a large button on the screen, and when I press it I want it to shrink and move to the bottom left corner of the screen (and on completion, hide itself and unhide an identical button in ending location with different features).

I have a label that expands and contracts on touch with UIView animateWithDuration:animations:completion: and it works just fine using the same approach, so I am confused why this won't work:

[UIView animateWithDuration:2.0
                 animations:^{
                      self.bigButton.frame = self.littleButton.frame;
                 }
                 completion:^(BOOL finished){
                     self.bigButton.hidden = YES;
                     self.littleButton.hidden = NO;
                 }];

When this executes, the big button appears in the bottom of the screen (off the screen partially) and animates to its original position, then executes the completion block.

Thinking that assigning one frame to the other would cause a problem, I recreated this in a standalone application and used CGRectMake and manually filled in the values. Same thing happened.

My questions:

• Why does this start my button in the bottom corner and animate to its original spot?
• How do I make bigButton (position center, large size) appear to animate into littleButton (position left bottom corner, small size)?

Answer 1

Use center and bounds for the animation instead of frame. From the docs for animating the frame property:

"Changes to this property can be animated. However, if the transform property contains a non-identity transform, the value of the frame property is undefined and should not be modified. In that case, you can reposition the view using the center property and adjust the size using the bounds property instead."

Answer 2

I'm not at my Macbook right now but I think this might be what you're looking for to make it move

 [UIView animateWithDuration:2.0
                                    options: UIViewAnimationCurveLinear
                                 animations:^{
                                     self.bigButton.center = CGMakePoint(XCOORD, YCOORD);
                                     self.bigButton.frame = CGRectMake(STARTX,STARTY,WIDTH,HEIGHT)
                                 }
                                 completion:^(BOOL finished){
                                     self.bigButton.hidden = YES;
                                     self.littleButton.hidden = NO;
                                 }];

where it will move to the point XCOORD, YCOORD and the size of the button will have the bottom left start at point (STARTX, STARTY) and will be LENGTH wide and HEIGHT high. again I can't check these since I'm not at my computer but I think that this is the direction you're trying to go to. I will look at this again when I get back home.

I also THINK you can just use CGRectMake to move the button and change the size.