Skip to content

This repository 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.

License

Notifications You must be signed in to change notification settings

GetStream/swiftui-spring-animations

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

SwiftUI Spring Animations Cheat Sheet for Developers

Try the new Spring Animation in SwiftUI: Snippet

Try the new Spring Animation in SwiftUI

Animate chat bubbles an extra bounce spring

Animate chat bubbles an extra bounce spring

Springy Duo: Available soon

Springy Duo

Download and try the companion Mac App: MotionScape - Animation Studio

Check the companion open-source project: MotionScape - Animation Studio

Realistic Chain: Swift file

Realistic Chain

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.

Watch the video: (YouTube tutorial)

HSwiftUI spring animation parameters

A Chained Spring: Swift file

Chained Spring

A Bouncy Transition: Swift file

Bouncy Transition

Transition a hamburger menu to a back icon Swift file

 Transition a hamburger menu to a back icon


SwiftUI Spring Animation Types

1 .spring()

A spring with no parameters. It applies gentle and sensible spring-feel to the object you want to animate.

Menu - Close icon transition: Swift file

Menu - Close icon

2 .interactiveSpring()

An interactive spring with no parameters. This creates a spring animation with high stiffness and low response. It makes the animation is less snappy:

Menu - Close icon transition: Swift file

Menu - Close icon

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 snappier animations. 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 a damping of 15 and stiffness of 170. Reducing the
    damping for example, to a value of 5 will create a spring animation that has higher bounciness.

Chat message reactions: Swift file

Chat message reactions

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.

Chat message reactions (Heart icon): Swift file

Chat message reactions

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:

    Chat message reactions

    • 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 in this repository, does not produce any visual change. This makes it difficult to see what it actually does.

Chat message reactions (Thumbs up icon): Swift file

Chat message reactions

6 .interactiveSpring(response, dampingFraction, blendDuration)

This allows you to create a spring animation that is based on 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 step 5 above, blend duration has no visible effect on the spring, at the time of writing this article.

Chat message reactions (Thumbs down icon): Swift file

Chat message reactions


SwiftUI Spring Animation Properties and Effects

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

Swift file Damping Fraction

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

Swift file Stiffness Bounc

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

Swift file Damping Fraction


SwiftUI Spring Animation Examples

Proceed with TouchID: Swift file

Proceed with TouchID

Text Spring 1: Swift file

Text Spring 1

Heart Icon Animation: Twitter Like Reaction Clone Swift file (coming soon)

Heart Icon Animation: Twitter Like Reaction Clone

Animated Font Weight:

import SwiftUI

struct AnimateFont: View {
    @State private var isMagicallyMoving = false
    
    var body: some View {
        Text("Animate SwiftUI Text Like Your Boss' Boss!")
            .font(isMagicallyMoving ? .title : .largeTitle)
            //.fontWeight(isMagicallyMoving ? .black : .ultraLight)
            .multilineTextAlignment(.center)
            .foregroundColor(isMagicallyMoving ? .indigo : .cyan)
            .animation(.interpolatingSpring(stiffness: 170, damping: 15).repeatForever(autoreverses: true), value: isMagicallyMoving)
            .onAppear {
                isMagicallyMoving.toggle()
            }
    }
}

Text Spring 2: Swift file

Text Spring 2

Chat Emojis: Swift file

Chat Emojis

Draggable Menu

Silent Mode: On

Animate a bell to fall and rotate after falling. It is similar to the iOS silent mode (on) animation. Since this animation emulates the presence of sound, it uses a very low damping to create a high bounce. Swift file Silent Mode: On

Silent Mode: Off

Animate a slashed bell to fall and rotate after falling. It uses a rectangular mask to show and hide the bell icon. Since this animation simulates the absence of sound, it uses moderate damping to prevent the bell from bouncing. Swift file Silent Mode: Off

Position Spring Animation

Animate a ball's position so that it appears to be pulled towards a target by a spring. Swift file Position Spring Animation

Scale Spring Animation

Create a spring animation that bounces a ball into view by animating its scale from 1 to 2. Swift file Scale Spring Animation

Recording Spring Animation:

Create a recording effect using different springs. Swift file Create a recording effect using different springs.

Animate a photo preview to its fill view

Swift file  Animate a photo preview to full view

Zoom a photo from its gallery

Swift file  Zoom a photo from gallery

Animate a photo from its fit view to a fullscreen view

Swift file  Animate a photo from its fit view to a fullscreen view

Animate a ball to fall and bounce

Swift file Animate a ball to fall and bounce

Animate a bell to rotate with springiness

Swift file Animate a bell to rotate with springiness


** Related Links **

About

This repository 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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages