Question

I have three UIButton objects visually stacked one on top of another. When a user taps on a button the buttons below should move down a certain distance. I am using the following animation block:

// Assuming button 1 was clicked...
[UIView animateWithDuration:0.25f
                      delay:0.0f
                    options:UIViewAnimationOptionCurveLinear
                 animations:^(void) {
                   self.button2.frame = CGRectOffset(self.button2.frame, 0.0f, 20.0f);
                   self.button3.frame = CGRectOffset(self.button3.frame, 0.0f, 20.0f);
                 }
                 completion:^(BOOL finished) { NSLog(@"Finished"); }];

If I increase the animation duration, e.g. from 0.25 to 0.75, the buttons do not remain together but they begin to move in different time intervals. I have tried with Core Animation methods, by grouping animations and other stuff, but haven’t found any solution yet.

Do you have any ideas? Right now I’m keeping the duration in 0.25 until I come up with something.

Answer 1

One solution is to set both button2 and button3 as a subview in another UIView and animate the view instead of each of the buttons separately. Whether this is a good approach depends on what you are trying to accomplish with the stacked button.

EDIT:

Since my experience is that animations within a block are in sync, I implemented the code as show below. I tried numerous values for the animation duration (0.15, 0.25, 0.75, 1.25) and button2 and button3 are moving in sync (and since button2 is on top of button3, I can’t actually see button3 at all, until I tap on button2, which causes button3 to move from underneath button 3).

- (IBAction)button1Tapped:(id)sender {
    NSLog(@"button1Tapped...");

    [UIView animateWithDuration:0.75f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^(void) {
                         self.button2.frame = CGRectOffset(self.button2.frame, 0.0f, 20.0f);
                         self.button3.frame = CGRectOffset(self.button3.frame, 0.0f, 20.0f);
                     }
                     completion:^(BOOL finished) { NSLog(@"Finished"); }];
}

- (IBAction)button2Tapped:(id)sender {
    NSLog(@"button2Tapped...");

    [UIView animateWithDuration:0.75f
                          delay:0.0f
                        options:UIViewAnimationOptionCurveEaseOut
                     animations:^(void) {
                         self.button3.frame = CGRectOffset(self.button3.frame, 0.0f, 20.0f);
                     }
                     completion:^(BOOL finished) { NSLog(@"Finished"); }];
}

- (IBAction)button3Tapped:(id)sender {
    NSLog(@"button3Tapped...");
}