How to animate changes in binding values >

How to create a spring animation

Paul Hudson @twostraws September 18th 2019

Fully updated for Xcode 11.3

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(action: {
            self.angle += 45
        }) {
            Text("Tap here")
                .padding()
                .rotationEffect(.degrees(angle))
                .animation(.spring())
        }
    }
}

If you want fine-grained control over the spring animation, send in any of the parameters that interest you: 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.

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

Button(action: {
    self.angle += 45
}) {
    Text("Tap here")
        .padding()
        .rotationEffect(.degrees(angle))
        .animation(.interpolatingSpring(mass: 1, stiffness: 1, damping: 0.5, initialVelocity: 5))
}

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.

How to create a spring animation

Similar solutions…