Animating a property of a custom Shape in SwiftUI - swift

Question

I have an Arc/Circle shape for which I am updating the end angle in a view.
I defined animatableData for the shape to animate it, however there is no animation happening in the view.
How can I fix this? I want to reach to same result that we get from trim, but without using that modifier.
This is my current code:
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)
}
}
}

Answer 1

Cedric's solution above works because it substitutes Angle for a value that implements VectorArithmetic. Another solution is to add an extension that makes Angle itself support VectorArithmetic. Here's a Playground that does that:
import UIKit
import SwiftUI
import PlaygroundSupport
extension Angle : AdditiveArithmetic {
public static var zero: Angle {
get { return Angle(degrees: 0)}
}
public static func + (lhs: Angle, rhs: Angle) -> Angle {
return Angle(degrees: fmod(lhs.degrees + rhs.degrees, 360.0))
}
public static func += (lhs: inout Angle, rhs: Angle) {
lhs.degrees = (lhs + rhs).degrees
}
public static func - (lhs: Angle, rhs: Angle) -> Angle {
return Angle(degrees: fmod(lhs.degrees - rhs.degrees, 360.0))
}
public static func -= (lhs: inout Angle, rhs: Angle) {
lhs.degrees = (lhs - rhs).degrees
}
}
extension Angle : VectorArithmetic {
public mutating func scale(by rhs: Double) {
self.degrees = fmod(self.degrees * rhs, 360.0)
}
public var magnitudeSquared: Double {
return self.degrees * self.degrees
}
}
struct ContentView: View {
#State 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)
}
}
}
let hostingController = UIHostingController(rootView: ContentView())
hostingController.view.bounds = CGRect(x: 0,y: 0,width: 320,height: 480)
// Present the view controller in the Live View window
PlaygroundPage.current.liveView = hostingController

Answer 2

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

Answer 3

Angle already Conforms to Animatable, so all you have to do is to modify your shape's animatableData property:
var animatableData: Angle.AnimatableData {
get { endAngle.animatableData }
set { endAngle.animatableData = newValue }
}
Bonus: if you want to animate both start and end angles:
var animatableData: AnimatablePair<Angle.AnimatableData, Angle.AnimatableData> {
get { AnimatableData(startAngle.animatableData, endAngle.animatableData) }
set { startAngle.animatableData = newValue.first; endAngle.animatableData = newValue.second }
}