In the fifth of our Thinking in SwiftUI challenges, we asked you to animate a path .

SwiftUI Challenge #5: Path Animations ⌚️

Animate a path between two starting points, in a motion that doesn't jump between them.

Reply with your solution, and we'll post ours next Tuesday. 👍

Starter code: https://t.co/aSLm1bS49G pic.twitter.com/E8v0onpbdD

— objc.io (@objcio) March 4, 2020

We started the challenge with code that draws a line. The starting point changes based on a boolean property, but despite the withAnimation , the path itself doesn't animate:

								let p1 = CGPoint(x: 50, y: 50)
let p2 = CGPoint(x: 100, y: 25)
let p3 = CGPoint(x: 100, y: 100)

struct ContentView: View {
    @State var toggle = true
    var body: some View {
        VStack {
            Button("Toggle") {
                withAnimation { self.toggle.toggle() }
            }
            Path { p in
                p.move(to: toggle ? p1 : p2)
                p.addLine(to: p3)
            }.stroke(lineWidth: 2)          
        }
    }
}

							

To animate a path, we need to tell SwiftUI which properties are animatable. One way to do this is by wrapping the path in a custom Shape . We create a Line shape with properties for both the line's start and end points:

								struct Line: Shape {
    var start, end: CGPoint

    func path(in rect: CGRect) -> Path {
        Path { p in
            p.move(to: start)
            p.addLine(to: end)
        }
    }
}

							

To animate the start and end properties, we need to expose them via animatableData , and the type of animatableData needs to conform to the VectorArithmetic protocol. Unfortunately, CGPoint does not conform to VectorArithmetic , and it's bad practice to add this conformance ourselves: you're not supposed to conform types you don't own to protocols you don't own , even though in this case, there wouldn't be much harm in it.

Luckily, CGPoint does conform to Animatable , so we can use its animatableData . We can now make both points of the Line animatable by creating an animatable pair out of the two CGPoint.Animatable values:

								extension Line {
    var animatableData: AnimatablePair<CGPoint.AnimatableData, CGPoint.AnimatableData> {
        get { AnimatablePair(start.animatableData, end.animatableData) }
        set { (start.animatableData, end.animatableData) = (newValue.first, newValue.second) }
    }
}

							

Our new book, Thinking in SwiftUI , discusses the animation system in more detail in chapter six. You can join the early access here .