SwiftUI Animation similar to that of the Apple Podcasts app expanding player - ios

Question

So I'm trying to mimic the Apple Podcasts app expanding audio player.
So far I've added an overlay to my TabView and it works like a charm, se below:
TabView {
...
}.overlay(
PlayerView()
)
Now I want to achieve the expanding view/sheet similar to the gif above for my PlayerView(), how would I go about doing that in SwiftUI?

Answer 1

So I solved this issue after some time researching, was a bit of hassle getting the animation working smoothly but I think I got it in the end. See code below:
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)
}
}
}
You would also need to play with some paddings in order for it to work perfectly.