Advanced Keyframe Animations in SwiftUI

Total control over your SwiftUI animation

iOS 17 was easily the best year SwiftUI ever had. It’s the gift that keeps on giving. We got Observation, advanced Mapping, and, best of all, Metal Shaders!

One neglected, but incredibly powerful part of this release was something I’ve been wanting to write about for ages: Keyframe Animations!

These are an advanced kind of animation that gives you total control.

Vanilla SwiftUI animation interpolates between from and to values when some state changes, defined by a simple timing curve. With keyframes, you can fully define the path taken by a movement, a transformation, or a value over time, with different timing curves for every part of a movement. This brings a whole ‘nother level of customisation and composability!

Keyframe animations contain a series of tracks. These define a timeline of points, which define exactly how a property will vary between each segment. Moving an object from point A to point B, you can, for example:

• Tell it to use a physically-accurate cubic curve to accelerate for the first 100px.

• Move smoothly and linearly for the next 300px.

• As it comes to a stop, create a whimsical spring motion as it comes to a stop.

You can orchestrate the same animations for virtually any property such as size, opacity, scale, 3D rotation, and even hue.

This is great if your properties conform to Animatable. But there are instances where you might be asked to animate something arbitrary, like a flip-book animation switching between many images at once. Perhaps your designer sadistically demanded an accelerating flipping speed for this animation.

SwiftUI provides a lesser-known API that makes this an absolute cakewalk. You can read out values from keyframe animation tracks and apply them to anything, anywhere. After today, there will be nothing you can’t animate.

In a minute, I’m going to bang on about:

• Etymology: What is a keyframe?

• Under the hood of Keyframes

• Practical Keyframe Animations

  • Basic setup with keyframeAnimator and KeyframeTrack

  • Reading the value of keyframes to animate anything

  • Using keyframe animations in Mapping apps

  • Going a bit crazy with it

• Last Orders

To demonstrate everything, I created a sample project that demonstrates the various ways you can apply the keyframe APIs in your code:

Subscribe to Jacob’s Tech Tavern for free to get ludicrously in-depth articles on iOS, Swift, tech, & indie projects in your inbox every week.

Paid members unlock several extra benefits:

• Read Elite Hacks, my exclusive advanced content 🌟

• Read my free articles 3 weeks before anyone else 🚀

• Access my brand-new Swift Concurrency course 🧵

Upgrade to read this article right now, or wait until September 1.