How to move an object along a path in swiftui - animation

Question

I try to move an Image along a path in a vein. I didn't find how to do it. Here my present code:
struct ContentView: View {
#State var chemin = Path {chemin in
chemin.move(to: CGPoint(x: 620, y: 0))
chemin.addLine(to: CGPoint(x:460, y:120))
chemin.addQuadCurve(to: CGPoint(x: 480, y: 200), control: CGPoint(x: 380, y: 220))
chemin.addLine(to: CGPoint(x:590, y:120))
chemin.addQuadCurve(to: CGPoint(x: 680, y: 320), control: CGPoint(x: 890, y: 160))
chemin.addLine(to: CGPoint(x: 300, y: 330))
chemin.addLine(to: CGPoint(x: 0, y: 160))
}
var body: some View {
ZStack{
Image("carte").resizable().ignoresSafeArea()
VStack{
Image("corona").resizable().frame(width: 150, height: 100, alignment: .center).animation(Animation.linear(duration: 3), value: true)
}
chemin.stroke(Color.green, lineWidth: 3).ignoresSafeArea()
}
}
}

Answer 1

I finally found how to do it, here's the code with some extra-functions:
import SwiftUI
struct FollowEffect: GeometryEffect {
var pct: CGFloat = 0
let path: Path
var rotate = true
var animatableData: CGFloat {
get { return pct }
set { pct = newValue }
}
func effectValue(size: CGSize) -> ProjectionTransform {
if !rotate {
let pt = percentPoint(pct)
return ProjectionTransform(CGAffineTransform(translationX: pt.x, y: pt.y))
} else {
// Calculate rotation angle, by calculating an imaginary line between two points
// in the path: the current position (1) and a point very close behind in the path (2).
let pt1 = percentPoint(pct)
let pt2 = percentPoint(pct - 0.01)
let a = pt2.x - pt1.x
let b = pt2.y - pt1.y
let angle = a < 0 ? atan(Double(b / a)) : atan(Double(b / a)) - Double.pi
let transform = CGAffineTransform(translationX: pt1.x, y: pt1.y).rotated(by: CGFloat(angle))
return ProjectionTransform(transform)
}
}
func percentPoint(_ percent: CGFloat) -> CGPoint {
let pct = percent > 1 ? 0 : (percent < 0 ? 1 : percent)
let f = pct > 0.999 ? CGFloat(1-0.001) : pct
let t = pct > 0.999 ? CGFloat(1) : pct + 0.001
let tp = path.trimmedPath(from: f, to: t)
return CGPoint(x: tp.boundingRect.midX, y: tp.boundingRect.midY)
}
}
struct ContentView: View {
#State var chemin: Path = Path {path in
path.move(to: CGPoint(x: 620, y: 0))
path.addLine(to: CGPoint(x:460, y:120))
path.addQuadCurve(to: CGPoint(x: 480, y: 200), control: CGPoint(x: 380, y: 220))
path.addLine(to: CGPoint(x:590, y:120))
path.addQuadCurve(to: CGPoint(x: 680, y: 320), control: CGPoint(x: 890, y: 160))
path.addLine(to: CGPoint(x: 300, y: 330))
path.addLine(to: CGPoint(x: 0, y: 160))
}
#State private var flag = false
var body: some View {
GeometryReader { proxy in
ZStack(alignment: .topLeading) {
Image("carte").resizable().ignoresSafeArea()
// Animate movement of Image
Image("corona").resizable().foregroundColor(Color.red).frame(width: 50, height: 50).offset(x: -25, y: -25).modifier(FollowEffect(pct: self.flag ? 1 : 0, path: chemin)).onAppear {
withAnimation(Animation.linear(duration: 4.0).repeatForever(autoreverses: false)) {
self.flag.toggle()
}
}
}.frame(alignment: .topLeading)
}
}
}