Animating A Sequence of Images

Edit PagePage History

This guide will demonstrate one method for creating a repeating "flip book" or animated gif effect given multiple images. We will use a method, animatedImageWithImages() that can be called on a UIImageView in order to cycle through a collection of images at a duration that we will specify.

Step 1: Add Your Image Assets

Make sure the images for your animation are all the same size.

• Add the image assets that you want to use as "frames" in your animation to the Assets.xcassets folder. View the Adding Image Assets article to learn how to add image assets to your views.

Step 2: Add an ImageView

We will hold our image animation in a UIImageView. It will need to be the same size as our image "frames".

• Add a UIImageView to your ViewController. You can do this in Storyboard or programmatically. View the Using UIImageView article to learn how to use the UIImageView class. HINT: A simple way is to just drag the first image "frame" on to the Storyboard from the Media Library at the bottom of the Utilities pane and it will automatically create an ImageView the correct size of your image frame.
• If you created your ImageView in Storyboard, create an outlet to your ViewController code file by ctrl + drag from the ImageView.

Step 3: Declare Your Instance Variables

Instance Variables are declared below the class ViewController: UIViewController { and above the override func viewDidLoad() {

• Define instance variables for your images.

var loading_1: UIImage!
var loading_2: UIImage!
var loading_3: UIImage!

We will need to store our images an array in order to easily reference them for our animation.

• Define an instance variable for your images array.
• Note: images is plural because it will contain multiple images. [UIImage]! means it will contain a collection of items, each item being of type, UIImage.

var images: [UIImage]!

We will store our animated image into another variable of type UIImage.

• Define an instance variable for your animated image.

var animatedImage: UIImage!

Step 4: Assign Values to Your Variables

Assign values to the variables you declared above within the viewDidLoad() method.

• Assign the image files in your assets to your image variables.

loading_1 = UIImage(named: "loading-1")
loading_2 = UIImage(named: "loading-2")
loading_3 = UIImage(named: "loading-3")

• Put your images into your images array.

images = [loading_1, loading_2, loading_3]

• Call the animatedImageWithImages method and store it in animatedImage This method takes two arguments
  • The array of images you want it to cycle through
  • The duration you want it to cycle at in seconds. Meaning it will go through all the frames in that time.

animatedImage = UIImage.animatedImage(with: images, duration: 1.0)

• Set the image inside your ImageView to be, animatedImage.

ImageView.image = animatedImage

Step 5: Run Your App!