Spring Animation: What does the blendDuration parameter do?

Question

In Apple's definition file for the spring animation is says:

blendDuration: The duration in seconds over which to interpolate changes to the response value of the spring.

Code Example

struct Spring_BlendDuration: View {
    @State private var change = false
    @State private var blendDuration = 100.0
    
    var body: some View {
        VStack(spacing: 20) {
            Circle()
                .foregroundColor(.green)
                .scaleEffect(change ? 0.2 : 1)
                .animation(.spring(response: 1, dampingFraction: 0.5, blendDuration: blendDuration))
            
            HStack {
                Image(systemName: "hare")
                Slider(value: $blendDuration, in: 0...200)
                Image(systemName: "tortoise")
            }.foregroundColor(.green).padding()
            
            Button("Change") {
                self.change.toggle()
            }.font(.title)
        }
    }
}

What it looks like

Comparison with fast Response parameter and slow Response parameter

I'm just not seeing any difference.

Note

I submitted feedback to Apple to get clarification on this. If I hear back from them, I'll update this question.

Answer 1

Here is an example to apply multiple spring() animations to the same property.

struct Spring_BlendDuration: View {
    @State private var change = false
    @State private var secondChange = false
    @State private var blendDuration = 1.0

    var body: some View {
        VStack(spacing: 20) {
            Circle()
                .foregroundColor(.green)
                .scaleEffect(change ? secondChange ? 0.1 : 0.3 : secondChange ? 0.5 : 1.0)
                .animation(.spring(response: 1, dampingFraction: 0.1, blendDuration: blendDuration), value: change)
                .animation(.spring(response: 10, dampingFraction: 1, blendDuration: blendDuration), value: secondChange)

             HStack {
                Image(systemName: "hare")
                Slider(value: $blendDuration, in: 0...2)
                Image(systemName: "tortoise")
            }.foregroundColor(.green).padding()

            Text("\(self.blendDuration)")

            Button("Change") {
                withAnimation{
                    self.change.toggle()}
            }.font(.title)

            Button("SecondChange") {
                withAnimation{
                    self.secondChange.toggle()}
            }.font(.title)
        }
    }
}

If you clicked the other button before a spring animation is over, you may notice some differences when blendDuration is applied. For example, the circle can expand very large easily compared to the situation without blendDuration.

According to the document:

A persistent spring animation. When mixed with other spring() or interactiveSpring() animations on the same property, each animation will be replaced by their successor, preserving velocity from one animation to the next. Optionally blends the response values between springs over a time period.