Alpha changing instantly with UIView animateWithDuration: instead of animating

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]; } -…

Accepted Answer

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:

- Use the completion handler of the first animation

- Nest the animations but delay the second one

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];
                 }];
```

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.

Alpha changing instantly with UIView animateWithDuration: instead of animating

Solution

Problem