UILabel animated fade in out isn't working

Question

I am trying to build an introduction to my app with UILabels fading in and out. I have two labels. I want the first one to fade in, stay on the screen for 4 seconds. Then second label should fade in and stay on the screen for 4 seconds. Then it should fade out both the labels.

I have the following code but it does not do anything since it goes straight to the final state. I have the following method in viewDidAppear(). What am I doing wrong?

-(void) animateLabels
{
    [UIView beginAnimations:@"First Label Display" context:nil];
    [UIView setAnimationDelay:4.0];
    firstLabel.alpha = 1;
    [UIView commitAnimations];


    [UIView beginAnimations:@"Second Label Display" context:nil];
    [UIView setAnimationDelay:6.0];
    secondLabel.alpha = 1;
    [UILabel commitAnimations];

    [UIView beginAnimations:@"Hide Labels" context:nil];
    [UIView setAnimationDelay:10.0];
    secondLabel.alpha = 0;
    firstLabel.alpha=0;
    [UILabel commitAnimations];

}

Answer 1

Use block based animation & chain your animations together. So there are 3 steps. label1 fadesIn, Label2 fadesIn, finally Label3 fadesIn. I have written the code below for fading in label1 & label2. Fading out is simple. I think you can fill in the rest. Its straight-forward from here...

Try this -

[UIView animateWithDuration:1.0 
                      delay:4 
                    options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction
                 animations:^(void) 
 {
     [firstLabel setAlpha:1.0];
 } 
                 completion:^(BOOL finished) 
 {
     if(finished)
     {
         [UIView animateWithDuration:1.0 
                               delay:4.0 
                             options:UIViewAnimationOptionCurveLinear | UIViewAnimationOptionAllowUserInteraction
                          animations:^(void) 
          {
              [secondLabel setAlpha:1.0];
          } 
                          completion:^(BOOL finished) 
          {
              if(finished)
              {
                  //put another block her to hide both the labels.
              }
          }];
     }
 }];

Answer 2

I suggest rewriting this using blocks. First animateWithDuration:animations:completion: and then nested animateWithDuration:delay:options:animations:completion: . It's far more flexible, and there's no need to run on pre-blocks systems these days.

Also, your first animation as written wouldn't trigger for 4 seconds.

Answer 3

Here is a solution in swift 4+

    UIView.animate(withDuration: 1.0, delay: 4, options: [.curveLinear, .allowUserInteraction], animations: {
    firstLabel.alpha = 1.0
}) { finished in
    if finished {
        UIView.animate(withDuration: 1.0, delay: 4.0, options: [.curveLinear, .allowUserInteraction], animations: {
            secondLabel.alpha = 1.0
        }) { finished in
            if finished {
                //put another block her to hide both the labels.
            }
        }
    }
}