SwiftUI: анимация между представлениями Single и HStack

Question

Цель:

1- Показывает вид (синий), который покрывает весь экран 2- При нажатии в нижнем (верхнем правом углу) отображается HStack, анимирующий правую сторону HStack (зеленый) "Анимация смещения слайда".

import SwiftUI

struct ContentView: View {

    @State var showgreen = false


    var body: some View {


    NavigationView {

        HStack {
            Rectangle()
            .foregroundColor(.blue)

            if showgreen  {
            Rectangle()
            .foregroundColor(.green)
            .offset(x: showgreen ? 0 : UIScreen.main.bounds.width)
            .animation(.easeInOut)
            }

           }

    .navigationBarItems(trailing:
      Button(action: { self.showgreen.toggle() }) {
              Image(systemName: "ellipsis")
              })
       }

    .navigationViewStyle(StackNavigationViewStyle())


    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
        .colorScheme(.dark)
        .previewDevice("iPad Pro (12.9-inch) (3rd generation)")
    }
}

Код работает, однако я не могу заставить работать зеленую "анимацию смещения слайда". Очень ценю любую помощь!:)

Answer 1

Вместо использования ifусловно, вам нужно, чтобы зеленый прямоугольник уже присутствовал и только за пределами экрана. когдаshowgreen переключателях, вам нужно уменьшить размер синего прямоугольника, чтобы освободить место для зеленого прямоугольника.

struct ContentView: View {
    @State var showgreen = false

    var body: some View {
        NavigationView {
            HStack {
                Rectangle()
                    .foregroundColor(.blue)
                    .frame(width: showgreen ? UIScreen.main.bounds.width / 2 : UIScreen.main.bounds.width)
                    .animation(.easeInOut)

                Rectangle()
                    .foregroundColor(.green)
                    .animation(.easeInOut)
            }
            .navigationBarItems(trailing:
                Button(action: { self.showgreen.toggle() }) {
                    Image(systemName: "ellipsis")
            })
        }
        .navigationViewStyle(StackNavigationViewStyle())
    }
}