UIView Image - fade from one image to another - ios

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

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

Answer 2

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