Path Animation in SwiftUI

DevTechie Inc

Jun 24, 2022

Photo by Aleksandra Boguslawska on Unsplash

Path in SwiftUI is not only easy to learn and build, but it gives us an opportunity to build custom shapes of our choice. All you need is a path you may want to draw along with conformance to Shape protocol. If you want to learn more about Path, please refer to a detailed article here (https://medium.com/devtechie/exploring-path-in-swiftui-8dd4cba89078)

But this article is about adding animation to Path. Here is what we will be building in this article.

We will start with a custom shape which will write “DT” short for “DevTechie” 😃 and we will call this shape 🥁 DevTechieShape 😉.

struct DevTechieShape: Shape {
    func path(in rect: CGRect) -> Path {
        Path { path in
            
            path.move(to: CGPoint(x: rect.minX, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.minX, y: rect.minY))
            
            path.addCurve(to: CGPoint(x: rect.midX, y: rect.midY), control1: CGPoint(x: rect.minX, y: rect.minY), control2: CGPoint(x: rect.midX, y: rect.minY))
            
            path.addCurve(to: CGPoint(x: rect.minX, y: rect.maxY), control1: CGPoint(x: rect.midX, y: rect.maxY), control2: CGPoint(x: rect.minX, y: rect.maxY))
            
            path.addCurve(to: CGPoint(x: rect.minX, y: rect.maxY), control1: CGPoint(x: rect.midX, y: rect.midY), control2: CGPoint(x: rect.midX, y: rect.maxY))
            
            path.addLine(to: CGPoint(x: rect.maxX * 0.75, y: rect.maxY))
            path.addLine(to: CGPoint(x: rect.maxX * 0.75, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
            path.addLine(to: CGPoint(x: rect.maxX, y: rect.minY))
        }
    }
}

We will use this shape inside a view:

struct PathAnimationExample: View {
    var body: some View {
        VStack {
            DevTechieShape()
                .stroke(Color.orange, lineWidth: 10)
                .frame(width: 200, height: 200)
        }
    }
}

Our screen should look like this:

Path has a special modifier called trim, which essentially trims the path. It takes from and to values, so we will add trim modifier to the shape where from will be 0.0, so our path will start from the beginning and to value will be a state property called pathProgress.

We will modify pathProgress with a slider control, as shown in the code below:

struct PathAnimationExample: View {
    @State private var pathProgress = 0.0
    var body: some View {
        VStack {
            DevTechieShape()
                .trim(from: 0.0, to: pathProgress)
                .stroke(Color.orange, lineWidth: 10)
                .frame(width: 200, height: 200)
            Slider(value: $pathProgress, in: 0.0...1.0)
                .padding()
        }
    }
}

Our view will look like this:

Now, to add animation, all we gotta do is add the animation modifier.

struct PathAnimationExample: View {
    @State private var pathProgress = 0.0
    var body: some View {
        VStack {
            DevTechieShape()
                .trim(from: 0.0, to: pathProgress)
                .stroke(Color.orange, lineWidth: 10)
                .frame(width: 200, height: 200)
                .animation(.easeInOut(duration: 10), value: pathProgress)
            Slider(value: $pathProgress, in: 0.0...1.0)
                .padding()
        }
    }
}

With that we have reached the end of this article. Thank you once again for reading. Subscribe to our weekly newsletter at https://www.devtechie.com