How to create a spring animation
Fully updated for Xcode 11.2
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.
LEARN SWIFTUI FOR FREE I have a massive, free SwiftUI video collection on YouTube teaching you how to build complete apps with SwiftUI – check it out!
Similar solutions…
