Introduction

Changing the image of a UIImageView instantly works, but it often looks abrupt in a polished iOS interface. The usual solution is to animate the transition with a cross-dissolve, a Core Animation transition, or a frame-based image animation depending on whether you are swapping one image, sliding between states, or playing a sequence.

Use a Cross-Dissolve for Ordinary Image Replacement

For most UI work, the simplest and best-looking solution is a transition animation around the image assignment.

1import UIKit
2
3func setImageWithFade(_ imageView: UIImageView, image: UIImage?, duration: TimeInterval = 0.25) {
4    UIView.transition(with: imageView,
5                      duration: duration,
6                      options: .transitionCrossDissolve,
7                      animations: {
8                          imageView.image = image
9                      },
10                      completion: nil)
11}

This is the normal answer when the requirement is "replace one image with another smoothly."

Use It in a View Controller

A small example makes the pattern clearer.

1import UIKit
2
3final class PhotoViewController: UIViewController {
4    @IBOutlet private weak var imageView: UIImageView!
5
6    @IBAction private func didTapNextPhoto() {
7        let nextImage = UIImage(named: "landscape-2")
8
9        UIView.transition(with: imageView,
10                          duration: 0.3,
11                          options: .transitionCrossDissolve,
12                          animations: {
13                              self.imageView.image = nextImage
14                          },
15                          completion: nil)
16    }
17}

The return value of the button action is not important here. The key is that the image property changes inside the transition block.

Use CATransition for More Control

If you want a different effect such as push or reveal, Core Animation gives you more options.

1import UIKit
2
3func setImageWithPush(_ imageView: UIImageView, image: UIImage?) {
4    let transition = CATransition()
5    transition.type = .push
6    transition.subtype = .fromRight
7    transition.duration = 0.3
8
9    imageView.layer.add(transition, forKey: "imageTransition")
10    imageView.image = image
11}

This is useful when the image change represents navigation or directional movement rather than a neutral fade.

Use animationImages for Frame Sequences

If you are not switching from one static image to another, but instead want to play a short sequence, UIImageView has built-in support for frame animation.

1import UIKit
2
3let imageView = UIImageView(frame: CGRect(x: 40, y: 40, width: 120, height: 120))
4imageView.animationImages = [
5    UIImage(named: "frame1")!,
6    UIImage(named: "frame2")!,
7    UIImage(named: "frame3")!
8]
9imageView.animationDuration = 0.6
10imageView.animationRepeatCount = 1
11imageView.startAnimating()

This is a different tool from transition-based swapping. Use it when the goal is an animated sequence, not a one-time replacement.

Handle Remote Images Carefully

If the image comes from the network, the transition should happen after the image data is ready, not while the fetch is still running. Otherwise the UI may fade into placeholder states or flicker as images arrive late.

A common pattern is:

• fetch or decode the image off the main thread
• return to the main thread
• perform the transition with the final image

That keeps the animation tied to a real visual change rather than to asynchronous uncertainty.

Keep the Animation Intentional

Not every image change needs animation. Small interface icons that change frequently can feel sluggish if every update is animated. On the other hand, hero images, avatars, and gallery content often benefit from a short fade.

A good rule is to animate when the change is noticeable enough that an abrupt swap would feel jarring. Use a short duration, usually around a quarter second to a third of a second, unless the design specifically calls for something more dramatic.

Common Pitfalls

• Setting the image outside the animation block and expecting a transition.
• Using heavy transitions for tiny images that change frequently.
• Starting the animation before a remote image is actually loaded.
• Confusing one-time transitions with frame-based image sequences.
• Performing UIKit updates off the main thread.

Summary

• For most UIImageView swaps, use UIView.transition with .transitionCrossDissolve.
• Use CATransition when you need more directional or custom transition effects.
• Use animationImages when the requirement is a frame sequence rather than a simple replacement.
• Trigger the animation only after the real image is ready.
• Keep image animations short and intentional so they improve the UI instead of distracting from it.