Question

I’m attempting to fade in a UIView that I’ve created by animating the alpha. I need to fade it in, leave it visible for a few seconds, then fade it out.

The fade out function works fine. The view smoothly disappears. But the fade in just makes the view appear instantly instead of slowly appearing over an interval of 0.5 seconds.

So it seems like the fade in animation isn’t working, just instantly setting the alpha to 1.0. I’m kind of at a loss here. Any ideas what I’m doing wrong? Thanks!

-(void)presentPopupPhrase:(NSString *)phrase 
                   inView:(UIView *)view 
             withDelegate:(id)delegate 
            andCompletion:(void (^)(BOOL completed))completion {

    MessagePopupView *pv = [[[MessagePopupView alloc] initWithFrame:self.frame andText:phrase] autorelease];
    pv.alpha = 0.0;
    [view addSubview:pv];

    [self fadeInMPV:pv 
       withDuration:self.fadeDuration 
           andDelay:self.fadeInDelay];

    [self fadeOutMPV:pv 
        withDuration:self.fadeDuration 
          afterDelay:self.fadeOutDelay 
      withCompletion:completion 
         andDelegate:delegate];
}

-(void)fadeInMPV:(MessagePopupView *)mpv 
    withDuration:(NSTimeInterval)duration 
        andDelay:(NSTimeInterval)delay 
{    
    [UIView animateWithDuration:duration 
                          delay:delay 
                        options:UIViewAnimationOptionCurveLinear 
                     animations:^{
                         mpv.alpha = 1.0;
                     } 
                     completion:nil];
}

-(void)fadeOutMPV:(MessagePopupView *)mpv
     withDuration:(NSTimeInterval)duration
       afterDelay:(NSTimeInterval)delay
     withCompletion:(void (^)(BOOL completed))completion
      andDelegate:(id)delegate 
{
    [UIView animateWithDuration:duration 
                          delay:delay 
                        options:UIViewAnimationOptionCurveLinear 
                     animations:^{
                         mpv.alpha = 0.0;
                     } 
                     completion:completion];
}

EDIT:

If it helps, here’s the VC code where I’m calling it from:

-(void)viewDidAppear:(BOOL)animated {

    CGRect phraseFrame = CGRectMake(20, 341, 280, 65);
    PopupPhraseController *phraseController = [[[PopupPhraseController alloc] initWithFrame:phraseFrame] autorelease];

    [phraseController presentPopupPhrase:@"Test Phrase" inView:self.view withDelegate:self andCompletion:^(BOOL completed){
        if (completed) {
            NSLog(@"completed");
        } else {
            NSLog(@"not completed");
        }
        NSLog(@"blocked!");
    }];

    [super viewDidAppear:animated];
}

Answer 1

You can’t chain the animations like that as the second animation block essentially causes the first one to be cancelled out.

You have two options for Linking Multiple Animations Together:

1. Use the completion handler of the first animation
2. Nest the animations but delay the second one

---

1. Looks something like this

   [UIView animateWithDuration:self.fadeDuration
                         delay:self.fadeInDelay
                       options:UIViewAnimationOptionCurveLinear 
                    animations:^{
                      pv.alpha = 1.0;
                    } completion:^(BOOL finished) {
   
                      [UIView animateWithDuration:self.fadeDuration
                                            delay:self.fadeOutDelay
                                          options:UIViewAnimationOptionCurveLinear 
                                       animations:^{
                                         pv.alpha = 0.0;
   
                                       } completion:completion];
                    }];
   

2. Looks something like this

   [UIView animateWithDuration:self.fadeDuration
                         delay:self.fadeInDelay
                       options:UIViewAnimationOptionCurveLinear 
                    animations:^{
                      pv.alpha = 1.0;
   
                      [UIView animateWithDuration:self.fadeDuration
                                            delay:self.fadeOutDelay + self.fadeDuration
                                          options:UIViewAnimationOptionCurveLinear 
                                       animations:^{
                                         pv.alpha = 0.0;
                                       } completion:completion];
   
                    } completion:nil];
   

---

The issue is because of the way you are setting up the animations.

When you set animatable properties on a view the backing model of the view is updated instantly. So when you set the alpha = 1.0 in the first block the backing data model for the view has the alpha as 1.0 and then the actual animation is kicked off on another thread to show the interpolation between the two values.

When you define the second block straight after the first the view essentially says “ok I need to animate from 1.0 (my current value in the model) to 0.0“, which is why you don’t see what you expected.