SwiftUI绑定值变更时Path路径动画不生效问题（watchOS）

尝试使用绑定（Binding）的.animate()方法实现watchOS端圆弧长度变化的平滑动画效果时，动画未正常触发，圆弧长度直接瞬间突变，无过渡过程。最小复现代码如下：

import SwiftUI

struct TestAnimation: View {
    
    @State var value: Float = 0.2
    
    var body: some View {
        VStack {
            Arc(value: $value)
            Button(action: { self.value += 0.1 }) {
                Text("Increment")
            }
        }
    }
}

struct Arc: View {

    var value: Binding<Float>

    var body: some View {
        ArcShape(value: value.animation(.easeOut(duration:2)))
            .stroke(lineWidth: 3)
    }
}


struct ArcShape : Shape {

    var value: Binding<Float>

    func path(in rect: CGRect) -> Path {
        var p = Path()
        let arcDegrees: Double = max(360.0 * Double(value.wrappedValue), 2.0)
        let endAngle = -90.0 + arcDegrees
        p.addArc(center: CGPoint(x: rect.midX, y:rect.midY), radius: rect.height / 2, startAngle: .degrees(-90), endAngle: .degrees(endAngle), clockwise: false)
        return p
    }
}

• 自定义Shape不应该持有Binding类型属性：Shape仅负责根据入参绘制路径，不需要双向修改数据，传入普通值类型参数即可，持有Binding属于多余设计。
• 核心缺失：自定义Shape要实现路径变化的平滑动画，必须实现animatableData计算属性，明确告诉SwiftUI哪个属性需要做逐帧插值。当前代码中ArcShape未实现该属性，SwiftUI不会生成动画过渡帧，值变化时会直接用最终值重绘，自然出现瞬间跳变。
• 动画触发逻辑位置错误：给Binding直接加.animation()无法驱动Shape的路径动画，Shape本身不处理Binding的动画逻辑，动画需要作用在值变化的触发阶段，配合Shape的animatableData才能生效。

1. 将ArcShape中Binding<Float>类型的value属性改为普通Float类型
2. 为ArcShape实现animatableData属性，将value声明为可动画插值的属性
3. 调整动画触发位置，在值修改时通过withAnimation包裹触发过渡，也可保留Binding动画写法

修正后的完整代码：

import SwiftUI

struct TestAnimation: View {
    
    @State var value: Float = 0.2
    
    var body: some View {
        VStack {
            Arc(value: $value)
            Button(action: {
                // 值变化时显式触发动画
                withAnimation(.easeOut(duration: 2)) {
                    self.value += 0.1
                }
            }) {
                Text("Increment")
            }
        }
    }
}

struct Arc: View {
    var value: Binding<Float>

    var body: some View {
        // 直接传入绑定的当前值即可，不需要传带动画的Binding给Shape
        ArcShape(value: value.wrappedValue)
            .stroke(lineWidth: 3)
    }
}


struct ArcShape : Shape {
    // 改为普通值类型属性
    var value: Float
    
    // 核心：声明可动画插值属性，SwiftUI会自动在值变化时逐帧计算中间值
    var animatableData: Float {
        get { value }
        set { value = newValue }
    }

    func path(in rect: CGRect) -> Path {
        var p = Path()
        let arcDegrees: Double = max(360.0 * Double(value), 2.0)
        let endAngle = -90.0 + arcDegrees
        p.addArc(center: CGPoint(x: rect.midX, y:rect.midY), radius: rect.height / 2, startAngle: .degrees(-90), endAngle: .degrees(endAngle), clockwise: false)
        return p
    }
}

注意：SwiftUI中所有自定义Shape的路径形变、尺寸变化类动画，都必须通过实现animatableData声明参与插值的属性，否则系统不会自动生成动画过渡帧。

内容的提问来源于stack exchange，提问作者James Allen