How to create a spring animation

About 3 min

How to create a spring animation 관련

SwiftUI by Example

Back to Home

How to create a spring animation | SwiftUI by Example

How to create a spring animation

Updated for Xcode 15

SwiftUI has built-in support for spring animations, which are animations that move to their target point, overshoot a little, then bounce back.

If you just use .spring() by itself, with no parameters, you get a sensible default. So, this creates a spring animation that rotates a button by 45 degrees every time it’s tapped:

struct ContentView: View {
    @State private var angle: Double = 0

    var body: some View {
        Button("Press here") {
            angle += 45
        }
        .padding()
        .rotationEffect(.degrees(angle))
        .animation(.spring(), value: angle)
    }
}

Download this as an Xcode project

If you want fine-grained control over the spring animation, send in any of the parameters that interest you. Here you have two options:

If you need to support iOS 16 and earlier, you need to specify the mass of the object, how stiff the spring should be, how quickly the springiness slows down, and how fast it starts moving at launch.
If you can support only iOS 17 and later, you can specify how long you want the spring to happen for, and optionally also add how much bounce and blending you want.

For example, this creates an iOS 16-compatible button with a moderate amount spring damping, which means it will bounce back and forth a few times time before reaching its target angle:

struct ContentView: View {
    @State private var angle: Double = 0

    var body: some View {
        Button("Press here") {
            angle += 45
        }
        .padding()
        .rotationEffect(.degrees(angle))
        .animation(.interpolatingSpring(mass: 1, stiffness: 1, damping: 0.5, initialVelocity: 10), value: angle)
    }
}

Download this as an Xcode project

Note

This is an interpolating spring, which means if you trigger the animation several times the spring effect will get stronger and stronger as the springs combine.

This code does more or less the same, using code compatible with iOS 17 and later:

struct ContentView: View {
    @State private var scale = 1.0

    var body: some View {
        Button("Press here") {
            scale += 1
        }
        .scaleEffect(scale)
        .animation(.spring(duration: 1, bounce: 0.75), value: scale)
    }
}

Download this as an Xcode project

Given how much easier the new API is compared to the old equivalent, I’d suggest moving to the new options as soon as you’re able.