Learn iOS/SwiftUI Spring Animations: Beyond the Basics

Let's unlock the secrets of iOS spring animations in SwiftUI. Learn all the SwiftUI spring animation types, understand their parameters, and discover how to create organic and buttery animations to enhance the user experience of your next iOS app.

Resources

• Get all the animations and more, from GitHub.
• Watch the YouTube video.
• Purposeful iOS Animation
• Open SwiftUI Animations
• Jiggle of Jello

Enter the Physics of the Spring

You do not need to be in a Physics motion class to animate with the spring with maximum flexibility. There are six spring animation types. Here is an overview of all the spring animation types in SwiftUI.?

Have 23 minutes? Learn all the spring concepts in this video.?

.spring()

Let's crawl before we start walking. You will begin with a spring that has no parameters .spring(). This spring applies a gentle and sensible spring feel to the object you want to animate. Here is the Swift file.

import SwiftU

struct Spring: View {
? ??
? ? @State private var isRotating = false
? ? @State private var isHidden = false
? ??
? ? var body: some View {
? ? ? ? VStack(spacing: 14){
? ? ? ? ? ??
? ? ? ? ? ? Rectangle() // top
? ? ? ? ? ? ? ? .frame(width: 64, height: 10)
? ? ? ? ? ? ? ? .cornerRadius(4)
? ? ? ? ? ? ? ? .rotationEffect(.degrees(isRotating ? 48 : 0), anchor: .leading)
? ? ? ? ? ??
? ? ? ? ? ? Rectangle() // middle
? ? ? ? ? ? ? ? .frame(width: 64, height: 10)
? ? ? ? ? ? ? ? .cornerRadius(4)
? ? ? ? ? ? ? ? .scaleEffect(isHidden ? 0 : 1, anchor: isHidden ? .trailing: .leading)
? ? ? ? ? ? ? ? .opacity(isHidden ? 0 : 1)
? ? ? ? ? ??
? ? ? ? ? ? Rectangle() // bottom
? ? ? ? ? ? ? ? .frame(width: 64, height: 10)
? ? ? ? ? ? ? ? .cornerRadius(4)
? ? ? ? ? ? ? ? .rotationEffect(.degrees(isRotating ? -48 : 0), anchor: .leading)
? ? ? ? }
? ? ? ? .onTapGesture {
? ? ? ? ? ? withAnimation(.spring()){
? ? ? ? ? ? ? ? isRotating.toggle()
? ? ? ? ? ? ? ? isHidden.toggle()
? ? ? ? ? ? }
? ? ? ? }
? ? ? ??
? ? }
}

struct Spring_Previews: PreviewProvider {
? ? static var previews: some View {
? ? ? ? Spring()
? ? ? ? ? ? .preferredColorScheme(.dark)
? ? }
}I        

As you see from the above, this spring gives the animation a gentle feel and that may be all you need. Nice huh?

.interactiveSpring()

Your animation does not need to feel gentle all the time. You can make it snappy too. This type creates a spring animation with high stiffness and low response. It results in a snappy spring animation. Swift file.

.interpolatingSpring(stiffness, damping)

This type allows you to create a spring animation based on stiffness and damping. Let's jog our memory about these parameters.

• Stiffness:?It defines the tensile strength of the spring. A higher stiffness will result in a snappier animation. It affects the force applied to the object and changes how quickly an object moves toward its target.
• Damping:?You can think of damping as the braking of a car or the back-drag frictional force on the surface the object is resting on. Its purpose is to stop an object over time. It also affects the ability to overshoot an object already in motion. Hint: Start with damping of 15 and stiffness of 170. Reducing the damping, for example, to a value of 5 will create a spring animation of a higher bounciness. Swift file.

.interpolatingSpring(mass, stiffness, damping, initialVelocity)

This allows you to create a spring animation that is based on mass, stiffness, damping, and initial velocity.?Default values: .interpolatingSpring (mass: Double = 1.0, stiffness: Double, damping: Double, initialVelocity: Double = 0.0).

• Mass:?Think of mass as the weight of the object that is animating. It changes the inertia of the object attached to the spring. That is the willingness of an object to move or stop moving. It is conceptually heavier and can be used to create a spring animation that overshoots. The heavier the mass, the longer it takes to move the object, speed it up, and slow it down.
• Initial Velocity:?The initial velocity is defined as the speed at which the animation object changes at the beginning of the animation. The default initial velocity is set to zero. It is measured in units per second of the animation. Swift file.

.spring(response, dampingFraction, blendDuration)

This type allows you to create a spring animation based on the response, damping fraction, and blend duration.?Default values: .spring (response: Double = 0.55, dampingFraction: Double = 0.825, blendDuration: Double = 0).?A higher response value will slow down the animation. A lower response speeds it up.

• Response:?It controls how quickly an animating property value will try and get to a target. You can use the response parameter to create an infinitely-stiff spring by setting its value to zero.
• Damping Fraction:?Damping fraction causes a gradual reduction in the spring’s oscillation. Using damping fraction, you can define how rapidly oscillations decay from one bounce to the next. Swift file.

Additionally, you can dampen the spring in the following ways.

• Over Damping:?Set the damping fraction to a value greater than 1. It lets the object animating quickly return to the rest position.
• Critical Damping:?Set the damping fraction = 1. It lets the object return to the rest position within the shortest possible time.
• Under Damping:?Set the damping fraction to be less than 1. It lets the object overshoot multiple times by passing and gradually reaching the rest position.
• Undamped:?Set the damping fraction = 0. This parameter lets the object oscillate forever.
• Blend Duration:?Blend duration is a frame of time during which a previous animation stops and the next animation starts. Changing the blend duration in any of the examples here does not produce any visual change. That makes it difficult to see what it actually does.

.interactiveSpring(response, dampingFraction, blendDuration

This type allows you to create a spring animation based on the response, damping fraction, and blend duration.?Default values: interactiveSpring (response: Double = 0.15, dampingFraction: Double = 0.86, blendDuration: Double = 0.25).?You can use this spring as an alternative to .spring(response, dampingFraction, blendDuration). Always start with the default values above. To check the default values in XCode, Control-click the spring modifier and select “Show Quick Help”. The thumbs-down animation below uses this spring. The damping fraction is inversely proportional to the springiness of the animation. Reducing the default damping fraction will make it bouncier.?Swift file.

SwiftUI Spring Animation Properties and Effects

Damping Fraction: High, medium, low, and no bounce

Swift file

Stiffness Bounce: High, low, medium, and very low stiffness

Swift file

Varying Stiffness and Damping: Stiff, gentle, wobble, and no wobble

Swift file

What Next?

This article serves as your reference and complete guide for SwiftUI Spring Animations. It demonstrates use cases for the various types of spring animations and parameters. No more guessing the values of the parameters for spring animations you create for your next iOS app. Clone the GitHub repo and use it as your spring animations cheat sheet. It is packed with several other spring animation examples. Enjoy.

Check out the following to learn more.

• Download the project or learn on GitHub
• Stream Developers SwiftUI Series on YouTube
• Amos’ Twitter:?https://twitter.com/amos_gyamfi/