Spring Animation: What does the blendDuration parameter do?

user_2209965 0
Viewed 1684

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

Animation

Comparison with fast Response parameter and slow Response parameter

Comparison

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.

swiftui
2 Answers

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.

user_103359560

It seems that currently blendDuration makes no visual change according to this spring animations sample project.

Changing the blend duration of any of the examples in this repository, does not produce any visual change.

blend duration has no visible effect on the spring, at the time of writing this article.

https://github.com/GetStream/swiftui-spring-animations

user_6492280
Related