swift - How to move an object in Ellipse path in SwiftUI?

Question

Ellipse Path

i am trying to move an object in ellipse path. but i don't know correct way and i think it need some of math and equation that i don't know until now

image of output

import SwiftUI

struct RotateObjectInEllipsePath: View {

let timer = Timer.publish(every: 0.01, on: .main, in: .common).autoconnect()

@State private var angle: Double = .zero
var body: some View {

    VStack {
        
        // circle shape
        Circle()
            .strokeBorder(Color.red, lineWidth: 2)
            .frame(width: 250, height: 250)
            .overlay(
            Image(systemName: "arrow.down")
                .offset(x: 250/2)
                .rotationEffect(.degrees(angle))
            )
            
        
        //Spacer
        Spacer()
            .frame(height: 100)
        
        
        // ellipse shape
        Ellipse()
            .strokeBorder(Color.red, lineWidth: 2)
            .frame(width: 250, height: 150)
            .overlay(
                Image(systemName: "arrow.down")
                    .offset(x: 250/2)
                    .rotationEffect(.degrees(angle))
            )
            
         
    }// VStack
    .animation(.default)
    .onReceive(timer) { _ in
        angle += 1
    }
          
}

struct RotateObjectInEllipsePath_Previews: PreviewProvider {
static var previews: some View {
    RotateObjectInEllipsePath()
}}

i found this code in community

x = x_center + Acos(2pi*t/T);

y = y_center + Bsin(2pi*t/T);

When A == B, the trajectory is a circumference

Answer 1

Only change the order between .rotationEffect and .offset, and the offset can be synchronized the ellipse trajectory and also can be synchronized with circumference trajectory.

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello, world!")
            .padding()
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

struct RotateObjectInEllipsePath: View {
    
    let timer = Timer.publish(every: 0.01, on: .main, in: .common).autoconnect()
    
    let a: CGFloat = 250.0
    let b: CGFloat = 150.0
    
    @State private var angle: Double = .zero
    
    @State private var ellipseX: CGFloat = .zero
    @State private var ellipseY: CGFloat = .zero
    
    var body: some View {
        VStack {
            Circle()
                .strokeBorder(Color.red, lineWidth: 2)
                .frame(width: a, height: a)
                .overlay(
                    Image(systemName: "arrow.down")
                        .offset(x: a/2)
                        .rotationEffect(.degrees(angle))
                )
                
            Spacer()
                .frame(height: 60)
            
            Ellipse()
                .strokeBorder(Color.red, lineWidth: 2)
                .frame(width: a, height: b)
                .overlay(
                    Image(systemName: "arrow.down")
                        .rotationEffect(.degrees(angle))
                        .offset(x: ellipseX, y: ellipseY)
                )
            
            Spacer()
                .frame(height: 40)
        }// VStack
        .animation(.default)
        .onReceive(timer) { _ in
            angle += 1
            let theta = CGFloat(.pi * angle / 180)
            ellipseX = a / 2 * cos(theta)
            ellipseY = b / 2 * sin(theta)
        }
    }
    
}

struct RotateObjectInEllipsePath_Previews: PreviewProvider {
    static var previews: some View {
        RotateObjectInEllipsePath()
    }
}