UIView animateWithDuration not respecting delay

Question

I want to schedule a series of animations which animate intro text across the screen. The very last animation, on completion, should fire off game tick logic that should run the game.

For some reason everything is happening immediately. Can anyone shed any light on why this is happening or a better alternative?

[self.view bringSubviewToFront:_ViewIntroSeconds];

[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) {
                     [_IntroLabel1 setAlpha:1];
                 }
                 completion:^(BOOL finished){
                 }];

[UIView animateWithDuration:0.4 delay:3.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) {
                     [_IntroLabel2 setAlpha:1];
                     [_IntroLabel1 setAlpha:0];
                     [_IntroLabel1 setCenter:CGPointMake(0, _IntroLabel1.center.y)];
                 }
                 completion:^(BOOL finished){
                 }];

[UIView animateWithDuration:0.4 delay:5.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) {
                     [_IntroLabel3 setAlpha:1];
                     [_IntroLabel2 setAlpha:0];
                     [_IntroLabel2 setCenter:CGPointMake(0, _IntroLabel2.center.y)];
                 }
                 completion:^(BOOL finished){
                     [self updateGame];
                     [self updateClock];

                     [_ViewIntroSeconds setAlpha:0];
                 }];

Answer 1

My suggestion would be to set the delay to 0, and place the subsequent UIView animation blocks in the completion block of the previous animateWithDuration statements:

[UIView animateWithDuration:0.4 delay:0.0 options:UIViewAnimationOptionCurveEaseInOut
                 animations:^(void) {
                     [_IntroLabel1 setAlpha:1];
                 }
                 completion:^(BOOL finished){
                     [UIView animateWithDuration:0.4 delay:2.6 options:UIViewAnimationOptionCurveEaseInOut
                                      animations:^(void) {
                                          [_IntroLabel2 setAlpha:1];
                                          [_IntroLabel1 setAlpha:0];
                                          [_IntroLabel1 setCenter:CGPointMake(0, _IntroLabel1.center.y)];
                                      }
                                      completion:^(BOOL finished){
                                          [UIView animateWithDuration:0.4 delay:1.6 options:UIViewAnimationOptionCurveEaseInOut
                                                           animations:^(void) {
                                                               [_IntroLabel3 setAlpha:1];
                                                               [_IntroLabel2 setAlpha:0];
                                                               [_IntroLabel2 setCenter:CGPointMake(0, _IntroLabel2.center.y)];
                                                           }
                                                           completion:^(BOOL finished){
                                                               [self updateGame];
                                                               [self updateClock];

                                                               [_ViewIntroSeconds setAlpha:0];
                                                           }];
                                      }];
                 }];

This will give you the desired effect.

EDIT : The reason this is happening is, UIView animateWithDuration block begins animation, and moves on to execute the following code, while the animation is still in effect. Hence it is advised to perform the 'next' animation effects in the completion block. Otherwise, all animateWithDuration requests will be performed almost instantly.

EDIT 2: I have edited the delay in the blocks to give you the 'illusion' of 0, 3, and 5 seconds respectively.