AnimatableData not working in Shape object with SwiftUI - path

Question

I have this Shape object (Curve) that I'm trying to animate:
private struct Curve : Shape {
private var startAngle : CGFloat
private var endAngle : CGFloat
private var drawn : Bool
private var hAdjustment : CGFloat
var clockwise : Bool = true
init(side: CurveSide, isDrawn: Bool) {
self.startAngle = side.startAngle
self.endAngle = side.endAngle
self.hAdjustment = side == .left ? 25 : -25
self.drawn = isDrawn
}
var animatableData : CGFloat {
get { self.endAngle }
set { self.endAngle = newValue }
}
func path(in rect: CGRect) -> Path {
let rotationAdjusment = CGFloat(90.0)
var baseCirclePath = Path()
baseCirclePath.addArc(center: CGPoint(x: rect.midX + CGFloat(self.hAdjustment), y: rect.midY),
radius: rect.width / 2.3,
startAngle: self.drawn ? Angle(degrees: Double(self.startAngle - rotationAdjusment)) : Angle(degrees: 0),
endAngle: self.drawn ? Angle(degrees: Double(self.endAngle - rotationAdjusment)) : Angle(degrees: 0),
clockwise: !self.clockwise)
return baseCirclePath
}
}
This is my contentView where I'm trying to use that shape (Curve):
HStack {
Spacer()
Curve(side: CurveSide.left, isDrawn: self.leftCurveDrawn)
.stroke(Color.white, lineWidth: 2)
.frame(width: 100)
Curve(side: CurveSide.right, isDrawn: self.rightCurveDrawn)
.stroke(Color.white, lineWidth: 2)
.frame(width:100)
Spacer()
}
And I'm using these variables to trigger the animation:
#State private var rightCurveDrawn = true
#State private var leftCurveDrawn = true
And this is what I get int the screen. The problem is that every time I toggle the #State variables the curves only appear and disappear with no animation. Thank you in advance.

Answer 1

You just need to trim your shapes and specify animation. Tested with Xcode 12 / iOS 14 (on replicated code)
struct ContentView: View {
#State private var rightCurveDrawn = false
#State private var leftCurveDrawn = false
var body: some View {
HStack {
Spacer()
Curve(side: CurveSide.left, isDrawn: self.leftCurveDrawn)
.trim(from: 0, to: leftCurveDrawn ? 1 : 0) // << here !!
.stroke(Color.blue, lineWidth: 2)
.frame(width: 100)
Curve(side: CurveSide.right, isDrawn: self.rightCurveDrawn)
.trim(from: 0, to: rightCurveDrawn ? 1 : 0)
.stroke(Color.red, lineWidth: 2)
.frame(width:100)
Spacer()
}
.animation(.easeInOut(duration: 2)) // << here !!
.onAppear {
self.rightCurveDrawn = true // can be on button or other
self.leftCurveDrawn = true // action
}
}
}

Answer 2

It looks like you will have to implement animation values yourself. What fun!
To get you started, you could add something like this inside your shape:
private var multiplier = 1.0
var animatableData: CGFloat {
get { CGFloat(self.multiplier) }
set { self.multiplier = Double(newValue) }
}
multiplier is nothing special, it's a value added by us, the devs. animatableData however, that's SwiftUI magic. By wrapping your state changes in a withAnimation closure, it will immediately set your shape to the new values, evaluate the final result of animatableData, and then interpolate the values across the animation time.
We can use the multiplier set in animatableData like so:
baseCirclePath.addArc(center: CGPoint(x: rect.midX + CGFloat(self.hAdjustment), y: rect.midY),
radius: rect.width / 2.3,
startAngle: Angle(degrees: Double(self.startAngle - rotationAdjusment) * self.multiplier),
endAngle: Angle(degrees: Double(self.endAngle - rotationAdjusment) * self.multiplier),
clockwise: !self.clockwise)
And don't forget to add this to the end of your init statement, to give SwiftUI something to evaluate:
self.multiplier = self.drawn ? 1 : 0
Note
Please note though, that my simple implementation of animatableData may not be the kind of animation you want here, but you can customize it however you want.
Finally, here's where I learned everything I know about this particular problem.