ios 如何在SwiftUI中获得不断沿圆形方向移动的视图的连续位置?

kmpatx3s  于 12个月前  发布在  iOS
关注(0)|答案(1)|浏览(96)

我试图得到一个在圆周方向移动的视图的位置。我能够得到起始位置,但我不知道如何得到这个位置,因为视图改变了它的位置。

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)
        }
    }
}

字符串
我怎样才能连续地得到那个视图的位置呢?任何帮助都将不胜感激。

4si2a6ki

4si2a6ki1#

目前,圆的位置是由动画决定的。这对于演示目的来说很好,但是当你需要能够读取Angular 并在其他地方使用它时,你需要改变数据的来源方式。
一种方法是使用Timer来更新Angular :

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)")
            }
        }
    }
}

字符串
你说你想知道移动圆的“位置”。如果你知道它的当前Angular ,那么你就可以计算它的位置。例如,你可以使用计算属性来提供它与圆心的相对位置。像这样:

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

相关问题