SwiftUI Animation: The Basics

Episode #135 • Feb 15, 2021 • Subscriber-Only

One of the most impressive features of SwiftUI is its animation system. Let’s explore the various flavors of animation, such as implicit versus explicit and synchronous versus asynchronous, to help prepare us for how animation works with the Composable Architecture.

The Basics
Introduction
00:05
SwiftUI animation
01:25
Implicit animations
03:01
Targeted implicit animation
15:33
Explicit animations
26:41
Next time: Animation in the Composable Architecture
38:23

Unlock This Episode

Our Free plan includes 1 subscriber-only episode of your choice, plus weekly updates from our newsletter.

Introduction

One of the most impressive features of SwiftUI is its animation system. With very little work you can animate almost anything in your application using a simple, declarative API. It’s honestly just an amazing feature of SwiftUI. We can’t say enough good things about it and there’s seemingly no downside to using it.

Today we are going to begin digging deeper into the SwiftUI animation system with the ultimate goal of seeing how it plays with the Composable Architecture. It turns out that most of SwiftUI’s animation machinery works out of the box for the Composable Architecture with no changes necessary. However, there is one specific situation where they don’t play so nicely, and that is animations that are driven off of the output of effects. It isn’t clear at all how to support animations for this use case, and the solution is really surprising and involves a novel transformation of schedulers.

But before we can dive into animating asynchronous effects we should maybe start with the basics. There’s a lot of nuance in the animation APIs in SwiftUI, and so we’d like to take a moment to get us all on the same page when it comes to animation.

This episode is for subscribers only.

Subscribe to Point-Free

Access this episode, plus all past and future episodes when you become a subscriber.

See plans and pricing

Already a subscriber? Log in

Exercises

  1. Our little app currently has some funny functionality: if we tap “cycle colors” and then tap “reset” before the color cycling is complete, any remaining colors will still animate. Let’s fix this by upgrading the “reset” button logic to cancel any upcoming color cycle animations.

  2. Rather than rely on @State, refactor our animation view to use a view model that conforms to ObservableObject.

Downloads