如何在 SwiftUI 中获取不断沿圆周方向移动的视图的连续位置？

Question

我正在尝试获取沿圆形方向移动的视图的位置。我能够获得起始位置，但我不知道如何在视图改变其位置时获得该位置。

struct ContentView: View {
    
    let mainCircleDiameter: CGFloat = 280
    let outerCircleDiameter: CGFloat = 320
    
    @State private var angle: Angle = .degrees(0)
    
    var body: some View {
        ZStack {
            Color.orange.ignoresSafeArea(.all, edges: .all)
            GeometryReader { geo in
                ZStack {
                    Circle()
                        .stroke(lineWidth: 10)
                        .frame(width: mainCircleDiameter)
                    
                    Circle()
                        .frame(width: 25)
                        .offset(y: outerCircleDiameter / 2)
                        .rotationEffect(angle)
                        .onAppear {
                            withAnimation(
                                .linear(duration: 6)
                                .repeatForever(autoreverses: false)) {
                                    angle.degrees = 360
                            }
                        }
                }
                .frame(width: geo.size.width, height: geo.size.height)
            }
            .frame(width: 400, height: 400)
        }
    }
}

如何连续获取该视图的位置？ 任何帮助将不胜感激。

Answer 1

目前，圆的位置正在由动画确定。这对于演示目的来说很好，但是当您需要能够读取角度并在其他地方使用它时，您需要更改数据的来源方式。

一种方法是使用

Timer

来更新角度：

struct ContentView: View {

    let mainCircleDiameter: CGFloat = 280
    let outerCircleDiameter: CGFloat = 320

    @State private var angle: Angle = .degrees(0)
    let timer = Timer.publish(every: 1 / 60.0, on: .main, in: .common).autoconnect()

    var body: some View {
        ZStack {
            Color.orange.ignoresSafeArea(.all, edges: .all)
            VStack {
                GeometryReader { geo in
                    ZStack {
                        Circle()
                            .stroke(lineWidth: 10)
                            .frame(width: mainCircleDiameter)

                        Circle()
                            .frame(width: 25)
                            .offset(y: outerCircleDiameter / 2)
                            .rotationEffect(angle)
                    }
                    .frame(width: geo.size.width, height: geo.size.height)
                    .onReceive(timer) { _ in
                        angle += .degrees(1)
                    }
                }
                .frame(width: 400, height: 400)

                Text("Angle: \(Int(angle.degrees) % 360)")
            }
        }
    }
}

你说你想知道动圈的“位置”。如果你知道它当前的角度，那么你可以计算它的位置。例如，您可以使用计算属性来传递其距圆心的相对位置。像这样：

var position: CGPoint {
    CGPoint(
        x: (-outerCircleDiameter / 2) * sin(angle.radians),
        y: (outerCircleDiameter / 2) * cos(angle.radians)
    )
}