swift - 简单的 SwiftUI Arc endAngle 动画不起作用，只能从一种状态跳转到另一种状态

Question

我正在尝试制作弧形外观的简单动画。这很简单，我不知道为什么不起作用。我做这个结构

struct Arc: Shape {
    var center: CGPoint
    var radius: CGFloat
    var endAngle: Double

    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.addArc(center: center, radius: radius, startAngle: .degrees(180), endAngle: .degrees(endAngle), clockwise: false)

        return path
    }
}

然后像这样加载它

struct TestView: View {
    @State var endAngle: Double = 180

    var body: some View {
            Arc(center: CGPoint(x: 250, y: 250), radius: 100, endAngle: self.endAngle)
                .stroke(Color.orange, lineWidth: 5)
                .onAppear() {
                    withAnimation(Animation.linear(duration: 20)) {
                        self.endAngle = 0
                    }
            }
    }
}

但不是动画，只能从 180 跳到 0。我也尝试过 OnTapGesture，但也不起作用。我现在不知道，为什么这不起作用

我的 ContentView 很简单

struct ContentView: View {
    var body: some View {
      TestView()
    }
}

我该如何解决？

标签： swiftswiftui

Answer 1

只需将动画数据添加到您的Arc，以指示应为哪个参数设置动画，如下所示

使用 Xcode 11.4 / iOS 13.4 测试

struct Arc: Shape {
    var center: CGPoint
    var radius: CGFloat
    var endAngle: Double

    var animatableData: CGFloat {     // << here !!
        get { CGFloat(endAngle) }
        set { endAngle = Double(newValue) }
    }

    func path(in rect: CGRect) -> Path {
        var path = Path()

        path.addArc(center: center, radius: radius, startAngle: .degrees(180), endAngle: .degrees(endAngle), clockwise: false)

        return path
    }
}