Animating GIFs and APNGs with CGAnimateImageAtURLWithBlock in SwiftUI

This year Apple added CGAnimateImageAtURLWithBlock and CGAnimateImageDataWithBlock for animating GIFs and APNGs on all the platforms to the ImageIO framework. We can pass in URL or data and get callbacks when animation changes the current frame. In Xcode 11 beta 7 implicit bridging to Swift is disabled for those APIs and therefore we need to create a small wrapper around it in Objective-C.

Creating ImageFrameScheduler for managing CGAnimateImageAtURLWithBlock in Objective-C

Calling CGAnimateImageAtURLWithBlock starts the animation immediately. When animation frame changes, the handler block is called with frame index, current animation frame image and stop argument. When setting stop to YES, we can stop the animation. With this in mind we can create ImageFrameScheduler what takes in URL and has methods for starting and stopping the animation. Then we can expose this class to Swift and use it for managing the animation.

	#import <CoreGraphics/CoreGraphics.h>
	#import <Foundation/Foundation.h>
	NS_ASSUME_NONNULL_BEGIN
	@interface ImageFrameScheduler: NSObject
	– (instancetype)initWithURL:(NSURL *)imageURL;
	@property (readonly) NSURL *imageURL;
	– (BOOL)startWithFrameHandler:(void (^)(NSInteger, CGImageRef))handler;
	– (void)stop;
	@end
	NS_ASSUME_NONNULL_END

view raw ImageFrameScheduler.h hosted with ❤ by GitHub

	#import "ImageFrameScheduler.h"
	#import "ImageIO/CGImageAnimation.h" // Xcode 11 beta 7 – CGImageAnimation.h is not in umbrella header IOImage.h
	@interface ImageFrameScheduler()
	@property (readwrite) NSURL *imageURL;
	@property (getter=isStopping) BOOL stopping;
	@end
	@implementation ImageFrameScheduler
	– (instancetype)initWithURL:(NSURL *)imageURL {
	if (self = [super init]) {
	self.imageURL = imageURL;
	}
	return self;
	}
	– (BOOL)startWithFrameHandler:(void (^)(NSInteger, CGImageRef))handler {
	__weak ImageFrameScheduler *weakSelf = self;
	OSStatus status = CGAnimateImageAtURLWithBlock((CFURLRef)self.imageURL, nil, ^(size_t index, CGImageRef _Nonnull image, bool* _Nonnull stop) {
	handler(index, image);
	*stop = weakSelf.isStopping;
	});
	// See CGImageAnimationStatus for errors
	return status == noErr;
	}
	– (void)stop {
	self.stopping = YES;
	}
	@end

view raw ImageFrameScheduler.m hosted with ❤ by GitHub

ImageAnimator conforming to ObservableObject in Swift

When updating views in SwiftUI, we can use ObservableObject protocol and @Published property wrapper what enables SwiftUI to get notified when the ObservableObject changes. This means that we need a model object written in Swift what stores our Objective-C class ImageFrameScheduler and exposes the current animation frame when animation is running. Whenever we update the property internally, property wrapper will take care of notifying SwiftUI to update the view.

	import Combine
	import UIKit
	final class ImageAnimator: ObservableObject {
	private let scheduler: ImageFrameScheduler
	init(imageURL: URL) {
	self.scheduler = ImageFrameScheduler(url: imageURL)
	}
	@Published var image: CGImage?
	func startAnimating() {
	let isRunning = scheduler.start { [weak self] (index, image) in
	self?.image = image
	}
	if isRunning == false {
	print("Failed animate image at url \(scheduler.imageURL)")
	}
	}
	func stopAnimating() {
	scheduler.stop()
	}
	}

view raw ImageAnimator.swift hosted with ❤ by GitHub

ContentView displaying animation frames in SwiftUI

Integrating ImageAnimator with ContentView is now pretty straight-forward, we check if animation frame image is available and display it. Animation is started when SwiftUI appears and stopped when it disappears.

	import SwiftUI
	struct ContentView: View {
	@ObservedObject var imageAnimator: ImageAnimator
	var body: some View {
	ZStack {
	if imageAnimator.image != nil {
	Image(imageAnimator.image!, scale: 1.0, label: Text("Gif"))
	}
	else {
	Text("Paused")
	}
	}.onAppear {
	self.imageAnimator.startAnimating()
	}.onDisappear {
	self.imageAnimator.stopAnimating()
	}
	}
	}

view raw ContentView.swift hosted with ❤ by GitHub

Summary

Although CGAnimateImageAtURLWithBlock and CGAnimateImageDataWithBlock are not directly usable in Swift, we can get away from it by adding a simple wrapper class in Objective-C. ImageFrameScheduler could be used in non-SwiftUI views by updating UIImageView when frame changes. In SwiftUI, views can use ImageAnimator for storing the current animation frame and using @Published property wrapper for letting SwiftUI view to know when to refresh.

If this was helpful, please let me know on Mastodon@toomasvahter or Twitter @toomasvahter. Feel free to subscribe to RSS feed. Thank you for reading.

Example Project

AnimateImageData (Xcode 11b7)