Cross-Fade Between Two UILabels

Question

Say that I have two UILabels (labelOne and labelTwo) and I need to cross-fade between the two labels. What is the best way of achieving this effect?

I have tried using [UIView beginAnimations:@"crossFade" context:nil]; etc. to fade-out labelOne and then fade-in labelTwo but there is a fairly noticeable gap when both labels are at a low opacity and you can see through both. I need a nice clean cross-fade effect instead. I have a feeling that I will need to use CABasicAnimation but I would appreciate some guidance. Thanks in advance!

Answer 1

This will fade one label (or any view) out while fading the other in. Half way through the animation, both will be at 50% opacity. To control the alpha separately, use a separate animation for each label and delay one of them.

label_to_show.alpha = 0.0;
label_to_hide.alpha = 1.0;

[UIView beginAnimations:nil context:nil];

label_to_show.alpha = 1.0;
label_to_hide.alpha = 0.0;

[UIView commitAnimations];

Answer 2

You could fiddle around with the animation curve try and find an acceptable look but I think you will do better just maintaining a third view underneath both labels to maintain the background appearance while the fades happen.

If you mean that you can see both labels at once don't fade concurrently, but fade quickly to a point at which the label begins to be unclear, replace it with the new label at the same fade level, then fade it up quickly to full visibility.

I say "fade" but it could also look very good to put a background-colored view on top of the labels and proceed to make that view more opaque, switching the labels underneath, then fading it to transparent again.

Answer 3

I've implemented something like this and it works very well.

[UIView transitionWithView:self duration:0.3 options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    _label1.hidden = YES;
    _label2.hidden = NO;
} completion:nil];