SwiftUI Animation похожа на анимацию плеера приложения Apple Podcasts

Question

Итак, я пытаюсь имитировать c приложение Apple Podcasts, расширяющее аудиоплеер.

Пока что я добавил оверлей на мой TabView, и он работает как шарм, см. ниже:

TabView {
    ...
}.overlay(
    PlayerView()
)

Теперь я хочу получить расширяющийся вид / лист, похожий на GIF выше для моего PlayerView(), как бы я go о делать это в SwiftUI?

Answer 1

Так что я решил эту проблему после некоторого времени исследования, было немного хлопотно, чтобы анимация работала плавно, но я думаю, что я получил ее в конце. См. Код ниже:

App.swift

TabView {
    ...
}.overlay(
    FloatingPlayer()
        .edgesIgnoringSafeArea(.all)
)

FloatingPlayer.swift

struct FloatingPlayer: View {
    @State var viewState = CGSize.zero
    @State var playerExpanded = false

    var body: some View {
        GeometryReader { geometry in
            VStack {
                if self.playerExpanded {
                    Spacer()
                }
                ZStack {
                    VisualEffectView(effect: UIBlurEffect(style: self.settings.playerExpanded ? .systemThickMaterialDark : .dark))
                            .frame(
                                width: geometry.size.width,
                                height: self.playerExpanded ? geometry.size.height + 10 : 60
                            )
                }
                     .offset(y: self.viewState.height)
                     .gesture(DragGesture()
                     .onChanged { value in
                         if (self.playerExpanded) {
                             self.viewState = value.translation
                             if (value.translation.height > 200) {
                                 self.playerExpanded = false
                                 self.simpleSuccess()
                             }
                         }
                     }
                     .onEnded { value in
                          self.viewState = CGSize.zero
                     })
                     .onTapGesture {
                         if !self.playerExpanded {
                             self.playerExpanded.toggle()
                         }
                     }
            }
                .animation(.interactiveSpring(response: 0.5, dampingFraction: 0.9, blendDuration: 0.3))
                .statusBar(hidden: true)
        }
    }
}

Вам также потребуется поиграть с некоторыми набивками, чтобы он работал идеально.