How to apply multiple animations to a view

About 2 min

How to apply multiple animations to a view 관련

SwiftUI by Example

Back to Home

How to apply multiple animations to a view | SwiftUI by Example

How to apply multiple animations to a view

Updated for Xcode 15

Improved in iOS 17

The order in which we use SwiftUI’s animation() modifier affects which modifiers get animated, and it’s also possible to add multiple animation() modifiers in order to get different animations.

There are two ways of doing this: A newer, clearer approach that’s available from iOS 17 and later, and an older alternative that also works in iOS 16 and earlier.

First, the new approach. In this code we animate the background color over one second, and the clip shape over two seconds:

struct ContentView: View {
    @State private var isEnabled = false

    var body: some View {
        Button("Press Me") {
            isEnabled.toggle()
        }
        .foregroundStyle(.white)
        .frame(width: 200, height: 200)
        .animation(.easeInOut(duration: 1)) { content in
            content
                .background(isEnabled ? .green : .red)
        }
        .animation(.easeInOut(duration: 2)) { content in
            content
                .clipShape(.rect(cornerRadius: isEnabled ? 100 : 0))
        }
    }
}

Download this as an Xcode project

You don’t need to specify a value to watch when using this new code, because you’re only ever animating the things specified in your close.

When using the older approach, you add multiple animation() modifiers wherever you want to adjust the animation stack for previous modifiers. For example, we could write code to create a button that animates between enabled and disabled states, making the corner rounding and background color changes. If we wanted the corner rounding to animate but not the color change, we’d use an animation such as animation(.default) after the clip shape, then animation(nil) after the background, like this:

struct ContentView: View {
    @State private var isEnabled = false

    var body: some View {
        Button("Press Me") {
            isEnabled.toggle()
        }
        .foregroundStyle(.white)
        .frame(width: 200, height: 200)
        .background(isEnabled ? .green : .red)
        .animation(nil, value: isEnabled)
        .clipShape(RoundedRectangle(cornerRadius: isEnabled ? 100 : 0))
        .animation(.default, value: isEnabled)
    }
}

Download this as an Xcode project

Using these techniques it’s possible to animate every modifier differently if you need to.