SwiftUI: clipping an image to shape

Question

I'm currently working on some loading screen in SwiftUI and want to implement some kind of image animation with a simple path. I've done a simple Shape-animation with the path, but Ive stuck with clipping an image to it. Is it possible?

I just want my image to simply fly over the screen (with a configurable path). Imagine that the stroke has a color of background, so we won't see it. Thanks!

struct loadingPath: Shape {
    func path(in rect: CGRect) -> Path {
        let path =
        Path { path in
            path.move(to: CGPoint(x: rect.midX, y: rect.midY))
            path.addQuadCurve(to: CGPoint(x: 230, y: 200), control: CGPoint(x: -100, y: 300))
            path.addQuadCurve(to: CGPoint(x: 90, y: 400), control: CGPoint(x: 400, y: 130))
            path.addLine(to: CGPoint(x: 90, y: 600))
        }
        return path
    }
}

.........

var body: some View {
            ZStack {
                loadingPath()
                    .trim(from: 0, to: x)
                    .stroke(Color.purple)
                    .frame(width: 200, height: 200)
                    .onAppear() {
                        withAnimation(Animation.easeInOut(duration: 3).delay(0.5)) {
                            self.x = 1
                        }
                    }
}

You need `clipShape` like in https://stackoverflow.com/a/63681491/12299030 — Asperi, Aug 22 '21 at 17:29
Does this answer your question? [Clip image to square in SwiftUI](https://stackoverflow.com/questions/58290963/clip-image-to-square-in-swiftui) — Adrien, Aug 22 '21 at 18:15
You mean animating an image on a path? I know I've seen a similar question recently, but I [can't seem to find it](https://meta.stackoverflow.com/q/410948/14351818) — aheze, Aug 22 '21 at 20:35

score 1 · Answer 1 · answered Aug 23 '21 at 06:08

If you want to give shape and then want to clipped it then use following :

.clipShape(RoundedRectangle(cornerRadius: 55,
        style: .continuous))

Or if you you want to clipped image according to it's frame then you can simply clipped it after give it frame like following :

.
.
loadingPath()
   .trim(from: 0, to: x)
   .stroke(Color.purple)
   .frame(width: 200, height: 200)
   .clipped()
   .onAppear() { ... }

SwiftUI: clipping an image to shape

1 Answers1