Fading UIView allows subviews to be seen

Question

I have a UIScrollView which contains various subviews (UIImageViews, UILabels and standard UIViews). Some of the UIImageViews are partially covered by other UIViews.

However, when I fade out the UIScrollView, the partially covered parts of the UIImageViews are being exposed for the brief moment of the animation.

I want to be able to fade the scrollview and all it's contents at the same time in the same animation - i.e. not revealing any of the partially covered images.

If it's not possible, I can always add a UIView on top of all the other controls and fade it from alpha 0 upto 1 to hide everything, but I'm sure there's a way to perform a complete fade on a view and all it's subviews.

I tried this:

[UIView beginAnimations:nil context:NULL];
[scrollViewResults setAlpha:0.0f];
[UIView commitAnimations];

And I've tried this:

- (IBAction)questionGroupChanged:(UIButton*)sender {
    [UIView beginAnimations:nil context:NULL];
    [self fadeViewHierarchy:scrollViewResults toAlpha:0.0f];
    [UIView commitAnimations];
}

- (void)fadeViewHierarchy:(UIView*)parentView toAlpha:(float)alpha {
    [parentView setAlpha:alpha];
    for (UIView *subView in parentView.subviews) {
        [self fadeViewHierarchy:subView toAlpha:alpha];
    }
}

But I've still not cracked it. Any ideas?

Answer 1

This happens because of the way the compositor works. You need to enable rasterization on the view's layer when fading it in/out:

view.layer.shouldRasterize = YES;

You should probably only enable this for the duration of the animation because it will take up some extra memory and graphics processing time.

Answer 2

Mike's answer is the correct one and he deserves all credit for this. Just to illustrate, it might look like:

- (void)fadeView:(UIView*)view toAlpha:(CGFloat)alpha
{
    view.layer.shouldRasterize = YES;

    [UIView animateWithDuration:0.75
                     animations:^{
                         view.alpha = alpha;
                     }
                     completion:^(BOOL finished){
                         view.layer.shouldRasterize = NO;
                     }];
}

Thus, using your scrollViewResults, it would be invoked as:

[self fadeView:scrollViewResults toAlpha:0.0f];