В SwiftUI, как мне анимировать вид из его текущего положения в центр экрана?

Question

В этом примере приложения у меня есть заголовок в левом верхнем углу экрана и кнопка в правом нижнем углу. Я использую стеки и проставки для их выравнивания.

В настоящее время, когда вы нажимаете кнопку, она немного оживляет вверх / влево. Но я хочу, чтобы кнопка анимировалась в точном центре экрана (или в безопасной области), независимо от размера устройства или кнопки. Код показан ниже вместе с изображениями начала и конца нужной анимации.

struct ContentView: View {

    @State var buttonIsMoved = false

    var body: some View {
        VStack {
            HStack {
                Text("Title")
                    .font(.largeTitle)
                Spacer()
            }
            Spacer()
            HStack {
                Spacer()
                // This is the button I want to animate to the center
                Button(action: {
                    self.buttonIsMoved.toggle()
                }) {
                    Text("This is a button")
                        .foregroundColor(.black)
                        .padding(16)
                        .background(Color.green)
                }
                    // Currently I'm just using fixed offset values,
                    // but I want it to move to the actual center of the screen
                    .offset(buttonIsMoved ? CGSize(width: -50, height: -200) : .zero)
                    .animation(.easeInOut)
            }
        }
        .padding(32)
    }
}

Начало анимации

Конец анимации

Если я использую .offset (), я не знаю, как рассчитать расстояние между центром кнопки и центром экрана. Я также пытался использовать .position (), но он основан на родительском представлении, в данном случае это HStack под заголовком, поэтому он не будет центрироваться по всему экрану. Я также слышал о GeometryReader, но не могу понять, как использовать его для этой цели.

Answer 1

Здесь возможное решение - без жесткого кодирования на основе встроенного движка SwiftUI.

Протестировано с Xcode 11.4 / iOS 13.4

struct DemoAnimateLayout: View {

    @State var buttonIsMoved = false

    var body: some View {
        ZStack {
            VStack {
                HStack {
                    Text("Title")
                        .font(.largeTitle)
                    Spacer()
                }
                Spacer()
            }
            VStack {
                if !buttonIsMoved {  // <<      here !!
                    Spacer()
                }

                HStack {
                    if !buttonIsMoved {  // <<     here !!
                        Spacer()
                    }
                    // This is the button I want to animate to the center
                    Button(action: {
                        self.buttonIsMoved.toggle()
                    }) {
                        Text("This is a button")
                            .foregroundColor(.black)
                            .padding(16)
                            .background(Color.green)
                    }
                }
            }
            .animation(.easeInOut)  // << animate container layout !!

        }.padding(32)
    }
}