Learning SwiftUI Spring Animations: The Basics and Beyond
Unlock the secrets of iOS spring animations using SwiftUI. Learn all the SwiftUI spring animation types, understand their parameters, and discover how to create organic and fine-grained spring animations to enhance the user experience of your next iOS app.
YouTube tutorial
SwiftUI Spring Animation Types
1 .spring()
A spring with no parameters. It applies a gentle and sensible spring feel to the object you want to animate.
2 .interactiveSpring()
An interactive spring with no parameters. This creates a spring animation with high stiffness and low response. It creates a spring animation that is less snappy.
3 .interpolatingSpring(stiffness, damping)
This allows you to create a spring animation that is based on stiffness and damping.
- Stiffness: It is defined as the tensile strength of the spring. A higher stiffness will result in a snappier animation. This affects the force applied to the object
and changes how quickly the object moves towards 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 the object over time. It also affects the ability to overshoot the object. 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 that has a higher bounciness.
4 .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 animating. It changes the inertial 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.
5 .spring(response, dampingFraction, blendDuration)
This allows you to create a spring animation that is based on 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 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 the
oscillations decay from one bounce to the next. Additionally, you can damp the spring in the following ways:
- Over Damping: Set the damping fraction to a value greater than 1. It lets the object you are 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 passing the rest position and gradually reaching the rest position.
- Undamped: Set the damping fraction = 0. This 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 of any of the examples here, does not produce any visual change. This makes it difficult to see what it actually does.
6 .interactiveSpring(response, dampingFraction, blendDuration)
This allows you to create a spring animation that is 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 the animation bouncier. As mentioned in 5 above, blend duration has no visible effect on the spring, at the time of writing this article.
SwiftUI Spring Animation Properties and Effects
Damping Fraction: High, medium, low, and no bounce
Stiffness Bounce: High, low, medium, and very low stiffness
Varying Stiffness and Damping: Stiff, gentle, wobble, and no wobble
SwiftUI Spring Animation Examples
Position Spring Animation:
Animate a ball’s position so that it appears to be pulled towards a target by a spring.
Scale Spring Animation:
Create a spring animation that bounces a ball into view by animating its scale from 1 to 2.
Recording Spring Animation:
Create a recording effect using different springs.
Animate a photo preview to its fill view
Zoom a photo from its gallery
Animate a photo from its fit view to a fullscreen view
Animate a ball to fall and bounce
Animate a bell to rotate with springiness
Conclusion
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 spring parameters. No more guessing the values of the parameters for spring animations you create for your next iOS app. Enjoy.
Useful Links
Download the project or learn on GitHub
Stream Developers SwiftUI Series on YouTube
Amos’ Twitter: https://twitter.com/amos_gyamfi/
Stream’s Twitter: https://twitter.com/getstream_io/
