How to animate the change of image in an UIImageView?
I have an UIImageView
with an image. Now I have a completely new image (graphic file), and want to display that in this UIImageView
. If I just set
myImageView.image = newImage;
the new image is visible immediately. Not animatable.
I want it to nicely fade into the new image. I thought maybe there's a better solution than just creating a new UIImageView
on top of that and blending with animation?
[UIView transitionWithView:textFieldimageView
duration:0.2f
options:UIViewAnimationOptionTransitionCrossDissolve
animations:^{
imageView.image = newImage;
} completion:nil];
is another possibility
I am not sure if you can animate UIViews with fade effect as it seems all supported view transitions are defined in UIViewAnimationTransition
enumeration. Fading effect can be achieved using CoreAnimation. Sample example for this approach:
#import <QuartzCore/QuartzCore.h>
...
imageView.image = [UIImage imageNamed:(i % 2) ? @"3.jpg" : @"4.jpg"];
CATransition *transition = [CATransition animation];
transition.duration = 1.0f;
transition.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
transition.type = kCATransitionFade;
[imageView.layer addAnimation:transition forKey:nil];
In the words of Michael Scott, keep it simple stupid. Here is a simple way to do this in Swift 3 and Swift 4:
UIView.transition(with: imageView,
duration: 0.75,
options: .transitionCrossDissolve,
animations: { self.imageView.image = toImage },
completion: nil)
Here is one example in Swift that will first cross dissolve a new image and then add a bouncy animation:
var selected: Bool {
willSet(selected) {
let expandTransform:CGAffineTransform = CGAffineTransformMakeScale(1.15, 1.15);
if (!self.selected && selected) {
UIView.transitionWithView(self.imageView,
duration:0.1,
options: UIViewAnimationOptions.TransitionCrossDissolve,
animations: {
self.imageView.image = SNStockCellSelectionAccessoryViewImage(selected)
self.imageView.transform = expandTransform
},
completion: {(finished: Bool) in
UIView.animateWithDuration(0.4,
delay:0.0,
usingSpringWithDamping:0.40,
initialSpringVelocity:0.2,
options:UIViewAnimationOptions.CurveEaseOut,
animations: {
self.imageView.transform = CGAffineTransformInvert(expandTransform)
}, completion:nil)
})
}
}
}
var imageView:UIImageView
If imageView
is correctly added to the view as a subview, toggling between selected = false
to selected = true
should swap the image with a bouncy animation. SNStockCellSelectionAccessoryViewImage
just returns a different image based on the current selection state, see below:
private let SNStockCellSelectionAccessoryViewPlusIconSelected:UIImage = UIImage(named:"PlusIconSelected")!
private let SNStockCellSelectionAccessoryViewPlusIcon:UIImage = UIImage(named:"PlusIcon")!
private func SNStockCellSelectionAccessoryViewImage(selected:Bool) -> UIImage {
return selected ? SNStockCellSelectionAccessoryViewPlusIconSelected : SNStockCellSelectionAccessoryViewPlusIcon
}
The GIF example below is a bit slowed down, the actual animation happens faster: