How to create a spring animation
Updated for Xcode 12.0
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.
SPONSORED Announcing NSSpain 2020: Remote Edition! An online, continuous conference for iOS developers. We’ll start on Thursday and finish on Friday, with talks, activities, and lots of fun for 36 hours, non-stop. Sound good? Join us!
Sponsor Hacking with Swift and reach the world's largest Swift community!
Similar solutions…
