地動説っぽいアニメーション

SolarSystem.swift

import SwiftUI

struct ContentView: View {
    @State var start: Date = .now

    var body: some View {
        TimelineView(.animation) { context in
            let progress = context.date.timeIntervalSince(start) / 10
            ZStack {
                Sphere(color: .red).frame(width: 30)
                    .overlay { Text("S").fontWeight(.bold) }
                ForEach(0..<6) { index in
                    Circle().stroke(lineWidth: 1)
                        .frame(width: 80 + 60 * CGFloat(index))
                }
                Group {
                    Sphere(color: .blue, offset: 40, progress: progress / 0.24)
                    Sphere(color: .yellow, offset: 70, progress: progress / 0.62)
                    Sphere(color: .green, offset: 100, progress: progress)
                    Sphere(color: .red, offset: 130, progress: progress / 1.88)
                    Sphere(color: .brown, offset: 160, progress: progress / 11.86)
                    Sphere(color: .gray, offset: 190, progress: progress / 29.46)
                }
                .frame(width: 20)
            }
        }
        .foregroundStyle(.white)
        .ignoresSafeArea()
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        .background(Color(white: 28/255))
        .onTapGesture {
            start = .now
        }
    }
}

struct Sphere: View {
    var color: Color
    var offset: CGFloat = .zero
    var progress: CGFloat = 1.0

    var body: some View {
        let theta = -2 * .pi * progress
        color.clipShape(.circle)
            .offset(x: offset * cos(theta), y: offset * sin(theta))
    }
}

#Preview {
    ContentView()
}