UIImage is not transitioning using fade with anima

Question

I am doing an image transition using an animation block like this

[UIView animateWithDuration:1.0f delay:0.0f options:UIViewAnimationOptionTransitionCrossDissolve animations:^{
    self.songTitleLabel.text = currentSong.songTitle;
    self.artistNameLabel.text = currentSong.songArtist;
    self.songImageView.image = currentSong.songArtwork;
}completion:^(BOOL finished){
    self.player = [[AVAudioPlayer alloc] initWithContentsOfURL:currentSong.songLocation error:nil];
    [self.player setVolume:1.0];
    [self.player play];
}];

I don't understand why I don't have a fade transition, I have tried several different UIAnimationOptionTransition... and every time I just get an abrupt jump to the next image (this happens to the text as well)

Can someone help me out?

Answer 1

You can't animate the changing of an image or text that way. I've done it like this,

-(IBAction)doStuff:(id)sender {

    [UIView transitionWithView:self.imageView
                      duration:1.0
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        [self.imageView setImage:[UIImage imageNamed:@"IMG_0081.JPG"]];
                    } completion:nil];

    [UIView transitionWithView:self.label2
                      duration:1.0
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        [self.label2 setText:@"New Text"];
                    } completion:nil];
}

If you're changing multiple labels or image views, it might be better to create a subclass, and override setText: and setImage:. For example, like this for setImage:,

-(void)setImage:(UIImage *)image {
    [UIView transitionWithView:self
                      duration:1.0
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                       [super setImage:image];
                    } completion:nil];
}

You can then just use,

self.imageView.image = ...

for any image view that's your subclass, and it will cross fade the images when you change them.