Spring Animation：blendDuration 参数有什么作用？

Question

在苹果的弹簧动画定义文件中是这样说的：

blendDuration：插入弹簧响应值变化的持续时间（以秒为单位）。

代码示例

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)
        }
    }
}

它看起来像什么

快速响应参数和慢响应参数的比较

我只是没有看到任何区别。

笔记

我向 Apple 提交了反馈以得到澄清。如果我收到他们的回复，我会更新这个问题。

Answer 1

下面是将多个 spring() 动画应用于同一属性的示例。

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)
        }
    }
}

如果您在弹簧动画结束之前单击另一个按钮，您可能会注意到应用 BlendDuration 时的一些差异。例如，与没有 BlendDuration 的情况相比，圆可以轻松扩展得很大。

根据文件：

持久的弹簧动画。spring() 当与同一属性上的其他动画混合时interactiveSpring()，每个动画将被其后继动画替换，从而保持从一个动画到下一个动画的速度。可以选择混合一段时间内弹簧之间的响应值。