All about engaging your user with better animations
Why Springs
- Animations provide a level of continuity, watching this move is more natural than just seeing it in a new place. Velocity is important to make it look more natural
- Ease in and out is a bezier animation defined by a curve and duration, to me this adds gravity to the animation
- Spring is like an ease in and out animation; however if you use a gesture with an animation a spring looks more natural if you flick or show the object
- Motion of a spring is not only a bouncing animation; it is about how the animation ends. It is a slow and natural stop, not like hitting a wall.
How Springs Work
- You are modeling a motion of an object attached to a spring. This is impacted by the mass of the object, the stiffness of the spring, and the damping of the system (aka friction).
- Initial position of the animation, and the target is the resting position of the spring.
- While changing those properties make sense for a physical system; in software we use duration and bounce to reflect the spring. Adding duration makes it take longer, and bounce will cause a bounce in the curve (if greater than 0, at 0 is smooth curve, less than zero takes a flatter time to stop.
- All of the math is implemented for you, a bouncy spring is like a cosine wave, at 100% it will oscillates back and forth. A * cos(2π * t / duration). You can see all three curves in this chart, where the Blue and Green curves are defined at the bottom and the dark curve is defined by the previous formula.
- To preserve velocity out cosine curve will start off with a downward curve.
- The velocity can come from a the velocity of a gesture, or from the velocity from an interrupted animation. The session goes through the rest of the calculations for those who are interested.
- You can use a completion handler that uses perceptual duration instead of the settling duration to process other activities
How to use Springs
- Springs are the default for SwiftUI
- You can explicitly use them presets like .snappy, .bouncy, and .smooth, and tune it with a duration or extra bounce
- You can customize the .spring completely
- There is also a spring model type to programmatically covert parameters, or just do the math yourself with
