Unlock This Episode
Our Free plan includes 1 subscriber-only episode of your choice, plus weekly updates from our newsletter.
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.
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.
Rather than rely on
@State, refactor our animation view to use a view model that conforms to