UIView Image - fade from one image to another

Question

I'm trying to fade from one image to another, using a SINGLE UIView (Yes! have seen Q&As on stackoverflow, that use 2 UIViews - on top of each other).

I have a current UIView image, would like to fade it out and replace it with another image, and fade the new image in.

I have tried the following: The fading of the first , alone, works.

Attempt #1)

  // Fade original image - image already set in Storyboard
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5.0];
    [UIView setAnimationDelegate:self];
    [_imgMirror setAlpha:0.0];
    [UIView commitAnimations];


    // Fade in new image
    [_imgMirror setImage:[UIImage imageNamed:@"NewImage"]];
    [UIView beginAnimations:nil context:NULL];
    [UIView setAnimationDuration:5.0];
    [_imgMirror setAlpha:100.0];
    [UIView commitAnimations];

This fades in new image... Old image does not fade. Also tried 'pausing' between the 2 groups of code.

Attempt #2)

UIImage * toImage = [UIImage imageNamed:@"NewImage"];
[UIView transitionWithView:self.imgMirror
                  duration:0.33f
                   options:UIViewAnimationOptionTransitionCrossDissolve
                animations:^{
                    self.imgMirror.image = toImage;
                } completion:NULL];

This shows the new image immediately, never fades or 'CrossDissolves'.

Attempt #3)

  // Fade original image - image already set in Storyboard
        [UIView beginAnimations:nil context:NULL];
        [UIView setAnimationDuration:5.0];
        [UIView setAnimationDelegate:self];
        [_imgMirror setAlpha:0.0];
        [UIView commitAnimations];



UIImage * toImage = [UIImage imageNamed:@"NewImage"];
    [UIView transitionWithView:self.imgMirror
                      duration:0.33f
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    animations:^{
                        self.imgMirror.image = toImage;
                    } completion:NULL];

This has the same result as #2.

Any idea what is wrong?

Answer 1

You cannot "cross fade" from one UIImage to another by setting the .image property of your image view.

You can do it with an "intermediary" image view though.

Assuming you have a UIImageView connected via IBOutlet, and a button connected via IBAction:

//
//  CrossFadeViewController.m
//
//  Created by Don Mag on 3/7/18.
//

#import "CrossFadeViewController.h"

@interface CrossFadeViewController ()

@property (strong, nonatomic) IBOutlet UIImageView *imgMirror;

@end

@implementation CrossFadeViewController

- (IBAction)didTap:(id)sender {

    [self crossFadeTo:@"NewImage"];

}

- (void) crossFadeTo:(NSString *)newImageName {

    UIImageView *toImageView;

    // create a new UIImageView with the new Image
    toImageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:newImageName]];

    // set the new image view's frame to match the existing one
    toImageView.frame = _imgMirror.frame;

    // cross-fade / dissolve from the existing image view to the new one
    [UIView transitionFromView:_imgMirror
                        toView:toImageView
                      duration:0.33
                       options:UIViewAnimationOptionTransitionCrossDissolve
                    completion:^(BOOL finished) {
                        // when animation is finished
                        // remove the "old" image view from its superview
                        [_imgMirror removeFromSuperview];
                        // assign the new image view to the IBOutlet property
                        _imgMirror = toImageView;
                    }];

}

@end

Answer 2

Try this. It fades the image out, swaps the image without an animation, then fades in with another animation.

CGFloat fadeDuration = 0.5f;
[UIView animateWithDuration:fadeDuration animations:^{
    [_imgMirror setAlpha:0.0];
} completion:^(BOOL finished) {
    UIImage * toImage = [UIImage imageNamed:@"NewImage"];
    _imgMirror.image = toImage;
    [UIView animateWithDuration:fadeDuration animations:^{
        [_imgMirror setAlpha:1.0];
    }];
}];