Exploring SwiftUI Animation Updates from WWDC 2023 [Part 1]

Introduction

SwiftUI is Apple’s modern declarative framework for building user interfaces. It’s been constantly evolving, empowering developers to create stunning and interactive app experiences. At WWDC 2023, Apple unveiled a wave of exciting updates to SwiftUI, with a particular focus on animation. These updates bring a new level of dynamism and expressiveness to SwiftUI, allowing developers to craft captivating user interfaces with ease.

In this article, we will take a deep dive into the latest advancements in SwiftUI animation that were unveiled at WWDC 2023. We’ll explore the new features, enhancements, and techniques that have been introduced, providing you with a glimpse into the future of SwiftUI animation.

Without further ado, let’s dive into the immersive world of SwiftUI animation and discover the remarkable enhancements introduced at WWDC 2023.

Animation phases

Animation phases enable the creation of intricate and detailed animations by breaking them down into smaller steps. Each step within an animation phase is referred to as a “phase.”

To utilize animation phases, the first step is to define a series of these phases. This can be done by creating an array of Phaseobjects. Each Phaseobject has two properties that dictate its behavior and characteristics within the animation:

• name: The name of the phase. This name is used to identify the phase in your code.
• action: A closure that is called when the phase starts. This closure is where you can set the properties of your views to the desired values for that phase.

Once you have defined a sequence of phases, you can use the phaseAnimator() modifier to animate your views through the sequence of phases.

To implement the phaseAnimator() modifier, you need to provide it with two arguments:

• phases: The sequence of phases to animate through.
• trigger: A closure that is called when the animation should start. This closure is typically used to track a change in state that triggers the animation.

For example, the following code creates an animation that elevates a view slightly, then grow and returns it to its original size.

enum Phase: CaseIterable {
    case initial
    case move
    case scale
}

struct ContentView: View {
    @State private var animate: Bool = false
    var body: some View {
        VStack(spacing: 20) {
            Image(systemName: "heart.fill")
                .resizable()
                .foregroundStyle(.red)
                .frame(width: 48, height: 48)
                .phaseAnimator(Phase.allCases, trigger: animate) { content, phase in
                        content
                        .offset(y: phase == .move ? -20 : 0)
                        .scaleEffect(phase == .scale ? 1.3 : 1)
                }
            
            Button {
                animate.toggle()
            } label: {
                Text("Animate")
            }

        }
        .padding()
    }
}

This is the result of the above code implementation.

It is important to note that if we do not provide a trigger value, the animation will run indefinitely. Furthermore, it is possible to define individual animations for each phase. However, I won’t discuss it further in this article. I encourage you to explore this topic on your own to gain a deeper understanding.

Keyframe Animations

Keyframe animations allow you to specify the exact values of an animated property at specific points in time. This gives you a lot of control over the animation, but it can also be more complex to set up. Keyframe animations are also not as flexible as animation phases, because they can’t be easily retargeted or interrupted.

To create a keyframe animation in SwiftUI, you first need to create a set of animation properties. You can then specify the properties you want to animate, as well as the values for those properties at each keyframe. You can also specify the timing function for the animation, which controls the speed and smoothness of the animation.

To implement keyframe animations, we can use keyframeAnimator modifier which has several arguments.

• initialValue: An argument that defines the initial animation properties
• trigger: A value to observe for changes
• repeating: An argument to set the animation to repeat forever.
• content: A closure that will be called for each frame of the animation. You can set the properties of your views using the interpolated value generated by the keyframes.
• keyframes: Defining how the value changes over time.

We can use KeyframeTrack that defines the keyframes for a keyframe animation. The KeyframeTrack struct takes two arguments: the name of the animated property and a closure that takes a Value object as its input and returns a Keyframe object. The Keyframe object specifies the value of the animated property at a specific point in time, as well as the duration of the keyframe.

Within a KeyframeTrack, we use Keyframe objects to specify the value of an animated property at specific points in time. There are different types of Keyframes, each with its own way of transitioning to the next Keyframe:

• CubicKeyframe: A keyframe that uses a cubic curve to smoothly interpolate between values.
• LinearKeyframe: A keyframe that uses simple linear interpolation.
• MoveKeyframe: A keyframe that immediately moves to the given value without interpolating.
• SpringKeyframe: A keyframe that uses a spring function to interpolate to the given value.

For example, the following code creates an animation that causes a view to shrink, then grow, and then return to its original size with a slight bouncing effect.

struct AnimationProperties {
    var scale = 1.0
}

struct ContentView: View {
    @State private var animate: Bool = false
    var body: some View {
        VStack {
            Image(systemName: "heart.fill")
                .resizable()
                .foregroundStyle(.red)
                .frame(width: 48, height: 48)
                .keyframeAnimator(initialValue: AnimationProperties(), trigger: animate) { content, value in
                    content
                        .scaleEffect(value.scale)
                } keyframes: { _ in
                    KeyframeTrack(\.scale) {
                        LinearKeyframe(0.1, duration: 0.36)
                        SpringKeyframe(1.5, duration: 0.5, spring: .bouncy)
                        SpringKeyframe(1, spring: .bouncy)
                    }
                }

            Button(action: { animate.toggle() }, label: {
                Text("Animate")
            })
            .padding(.top, 40)
        }
        .padding()
    }
}

This is the result of the keyframe implementation above

There are more to go…

In this article, we have explored the latest advancements in SwiftUI animation that were unveiled at WWDC 2023. We have learned about animation phases and keyframe animations, two powerful new tools that can be used to create stunning and interactive user interfaces.

In the next part of this article, we will explore spring animations update, custom animation, animation completion handler and many more. Stay tuned!