Animating variable of a Shape in SwiftUI-CodePudding

I have an Arc/Circle Shape which I am updating end angle in View, I defined animatableData for the Shape to animate the Shape! How ever I see no animation happen in View! I want reach to same result that could we get from trim without using that modifier! Which correction should I do, to make the animation happen!

struct ContentView: View {
    
    @State private var endAngle: Angle = Angle()
    
    var body: some View {
        
        Button("add") { endAngle  = Angle(degrees: 30.0) }.padding()
        
        CircleShape(lineWidth: 10, startAngle: Angle(degrees: 0.0), endAngle: endAngle)
            .stroke(Color.green, style: StrokeStyle(lineWidth: 10, lineCap: .round))
            .animation(.default, value: endAngle)
 
    }
    
}

struct CircleShape: Shape {
    
    let lineWidth: CGFloat
    var startAngle: Angle
    var endAngle: Angle
    
    var animatableData: Angle {
        get { endAngle }
        set { self.endAngle = newValue }
    }
    
    func path(in rect: CGRect) -> Path {

        return Path { path in
            
            let radius: CGFloat = (min(rect.maxX, rect.maxY) - lineWidth)/2.0
            
            path.addArc(center: CGPoint(x: rect.midX, y: rect.midY),
                        radius: radius,
                        startAngle: startAngle,
                        endAngle: endAngle,
                        clockwise: false)
            
        }
        
    }
    
}

CodePudding user response：

The problem seems to be the use of Angle.

One of the simplest solutions is to use the CGFloat type which conforms VectorArithmetic.

So changing Angle to CGFloat, your code would look like:

struct ContentView: View {
    
    @State private var endAngle: CGFloat = 0.0
    
    var body: some View {
        
        VStack {
            
            Button("add") { endAngle  = 30.0 }.padding()
            
            CircleShape(lineWidth: 10, startAngle: 0, endAngle: endAngle)
                .stroke(Color.green, style: StrokeStyle(lineWidth: 10, lineCap: .round))
                .animation(.default, value: endAngle)
        }
        .padding()
    }
}

struct CircleShape: Shape {
    
    let lineWidth: CGFloat
    var startAngle: CGFloat
    var endAngle: CGFloat
    
    var animatableData: CGFloat {
        get { endAngle }
        set { endAngle = newValue }
    }
    
    func path(in rect: CGRect) -> Path {

        return Path { path in
            
            let radius: CGFloat = (min(rect.maxX, rect.maxY) - lineWidth)/2.0
            
            path.addArc(center: CGPoint(x: rect.midX, y: rect.midY),
                        radius: radius,
                        startAngle:  Angle(degrees: startAngle),
                        endAngle: Angle(degrees: endAngle),
                        clockwise: false)
        }
    }
}