Overview of animated images in iOS

iOS SDK can animate series of images. It could be done in two ways: via UIImageView’s animatedImages property or via “animated” UIImage.

Both ways have it’s own advantages.

In case of UIImageView.animatedImages property - you’ll need to provide array of UIImages, but in other hand - you will be able to control animation using UIImageView.startAnimating() or UIImageView.stopAnimating() methods.

In case of “animated” UIImage you can load whole series of images using UIImage.animatedImageNamed method and assign it to UIImageView.image property. However, in this case you can’t control animation using UIImageView.stopAnimating() and UIImageView.startAnimating() methods. So whenever you want to freeze your animation - you need to set single image to your UIImageView instead of animated one.

Usage of animated image in iOS

First of all you need prepare images sequence. The best way is to name it using following pattern: “<ImageName><index>”, where index in 1..<AmountOfImagesInSequence>. For example: MyImage1, MyImage2, MyImage3, MyImage4 and so on.

Images sequence for animation

After drag n drop into your .xcassets folder in Xcode, you should see all the image from sequence:

Images sequence for animation

Now we only need to use it in UIImageView:

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        self.imageView.image = UIImage.animatedImageNamed("LoadingIndicator", duration: 0.7)
    }
}

or using UIImageView.animatedImages property:

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let images: [UIImage] = [
            UIImage(named: "LoadingIndicator1")!,
            UIImage(named: "LoadingIndicator2")!,
            UIImage(named: "LoadingIndicator3")!,
            UIImage(named: "LoadingIndicator4")!,
            UIImage(named: "LoadingIndicator5")!,
            UIImage(named: "LoadingIndicator6")!,
            UIImage(named: "LoadingIndicator7")!,
            UIImage(named: "LoadingIndicator8")!
        ]

        self.imageView.animationImages = images
        self.imageView.animationDuration = 0.7
        self.imageView.startAnimating()
    }
}

As you see, there are lot of force unwrapping using !, because UIImageView.animationImages has [UIImage]? type and not [UIImage?]. To fix that and reduce code lines we can use first approach to load array of images:

import UIKit

class ViewController: UIViewController {
    @IBOutlet weak var imageView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let images = UIImage.animatedImageNamed("LoadingIndicator", duration: 0)?.images

        self.imageView.animationImages = images
        self.imageView.animationDuration = 0.7
        self.imageView.startAnimating()
    }
}

As a result we’ll see this animation:

Animation in action

By the way, animated images do not work with Template Render Mode. I tried it several times with a different approaches but nope, it just doesn’t work that way.

Updated:

Leave a Comment