How to Animate Images in a UIImageView with Completion Handler

I needed to do a simple animation on my iOS project recently, and I was frustrated by how difficult it turned out to be. I wasn’t writing a game, so I didn’t need to bring in the power of the Sprite Kit libraries. All I needed was to show a series of images in a UIImageView.  

My first attempt was to use the UIImageView.animationImages api to do my animation. This was incredibly easy, but very limiting. After the animation was complete, I needed to show the last frame of the animation in the UIImageView. This proved to be very difficult if not impossible with the animationImages API. After the animation completes, the UIImageView is reset to the original image that was displayed before the animation started. If my animation had been symmetric, it would not have been a problem.

Attempt #1 – Using the AnimationImages Property for Animation

This API is really simple. Load up a series of images in an array and set the UIImageView.animationImages property to that array of images. Next tell the UIImageView how long your animation is and whether to repeat the animation and call start. It is that easy.

NSMutableArray *images = [[NSMutableArray alloc] init];
NSInteger animationImageCount = 38;
for (int i = 0; i < animationImageCount; i++) {
    [images addObject:[UIImage imageNamed:[NSString stringWithFormat:@"IndexedImagesInMyAnimation%d", i]]];
}

self.animationImageView.animationImages = images;
self.animationImageView.animationDuration = animationImageCount / 24.0;
self.animationImageView.animationRepeatCount = 1;
[self.animationImageView startAnimating];

The problem is there is no completion block or delegate protocol for getting notified when the animation is complete. Therefore I could not reset the UIImageView to the last image in the animation.

A quick search on Stack Overflow didn’t turn up any good solutions. The only hack was to call performSelector with a delay that matched the duration of my animation. This did not work for me because there was a lag in starting the animation, so I couldn’t get the timing just right. I either showed the last frame of the animation too early or the image reset to the first frame, for a brief moment, and then back to the last frame.

Attempt #2 – Using CAKeyFrameAnimation and animationDidStop

My second attempt was to use the CAKeyFrameAnimation API. This gave me much more control over my animation. I could get notified when the animation was completed by setting the delegate of the animation, and the animation would call animationDidStop when it was finished.

I saved the last frame of my animation so I could set the UIImageView when the animation was finished. I also had to change my NSArray of images to store the CGImage instead of the UIImage.

- (void) playAnimation {
    NSMutableArray *images = [[NSMutableArray alloc] init];
    NSInteger animationImageCount = 38;
    for (int i = 0; i < animationImageCount; i++) {
        // Images are numbered IndexedImagesInMyAnimation0, 1, 2, etc...
        [images addObject:(id)[UIImage imageNamed:[NSString stringWithFormat:@"IndexedImagesInMyAnimation%d", i]].CGImage];
    }
    self.lastImageInAnimation = [UIImage imageNamed:[NSString stringWithFormat:@"IndexedImagesInMyAnimation%d", animationImageCount - 1]];

    CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
    animation.calculationMode = kCAAnimationDiscrete;
    animation.duration = animationImageCount / 24.0; // 24 frames per second
    animation.values = images;
    animation.repeatCount = 1;
    animation.delegate = self;
    [self.animationImageView.layer addAnimation:animation forKey:@"animation"];
}

- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag {
    if (flag) {
        self.animationImageView.image = self.lastImageInAnimation;
    }
}

This worked okay, but with further exploration of CAKeyFrameAnimation API, I discovered a way to keep the last frame of the animation displayed. I didn’t even need the animationDidStop function anymore. By setting the poorly-named fillMode property appropriately, I could keep the animation visible after it was complete.

Attempt #3 – Using CAKeyFrameAnimation and kCAFillModeForwards to Keep the Last Frame Visible

NSMutableArray *images = [[NSMutableArray alloc] init];
NSInteger animationImageCount = 38;
for (int i = 0; i < animationImageCount; i++) {
    // Images are numbered IndexedImagesInMyAnimation0, 1, 2, etc...
    [images addObject:(id)[UIImage imageNamed:[NSString stringWithFormat:@"IndexedImagesInMyAnimation%d", i]].CGImage];
}

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"contents"];
animation.calculationMode = kCAAnimationDiscrete;
animation.duration = animationImageCount / 24.0; // 24 frames per second
animation.values = images;
animation.repeatCount = 1;
animation.removedOnCompletion = NO;
animation.fillMode = kCAFillModeForwards;
[self.animationImageView.layer addAnimation:animation forKey:@"animation"];

Wondering what other values you could set for fillMode? Here is a complete list of possible values. The receiver in this case is the animation.

• kCAFillModeRemoved – The receiver does not appear until it begins and is removed from the presentation when it is completed.
• kCAFillModeForwards – The receiver does not appear until it begins but remains visible in its final state when it is completed.
• kCAFillModeBackwards – The receiver appears in its initial state before it begins but is removed from the presentation when it is completed.
• kCAFillModeBoth – The receiver appears in its initial state before it begins and remains visible in its final state when it is completed.

The AnimationImages method has so much promise as a nice simple way of animating images, but in the end I needed more control. Luckily Apple has provided us CAKeyFrameAnimation to fill that role.